.pesudo{
position: absolute;
top:50%;
left: 50%;
transform:translate(-50%,-50%);
width: 120px;
padding: 60px;
text-align: center;
color: white;
font-size: 200%;
border-radius:1em;
background:#00aabb;
cursor:pointer;
}
.pesudo:before{
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index:-1;
border-radius:1em;
background:rgba(0,0,0,.1);
}
.pesudo:hover:before{
content:"";
}
.pesudo:after{
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index:-1;
border-radius:1em;
background:rgba(255,255,255,.2);
}
.pesudo:active:after{
content:"";
}

  

陈大吊

css实现一色多变化的更多相关文章

  1. css的checkbox样式变化

    1.CSS body{font-family:'微软简行楷'} ul li{list-style:none; margin:10px;color:#4985d7;} .myCheck { displa ...

  2. CSS 3学习——animation动画

    以下内容根据官方文档翻译以及自己的理解整理. 1.  介绍 本方案介绍动画(animations).通过动画,开发者可以将CSS属性值的变化指定为一个随时间变化的关键帧(keyframes)的集合.在 ...

  3. gulp实现打包js/css/img/html文件,并对js/css/img文件加上版本号

    参考打包教程: http://www.cnblogs.com/tugenhua0707/p/4069769.html http://www.cnblogs.com/tugenhua0707/p/498 ...

  4. css中的1px并不总等于设备的1px(高分辨率不等 低分辨等)

    在css中我们一般使用px作为单位,在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素,这可能会造成我们的一个错觉,那就是css中的像素就是设备的物理像素.但实际情况却并非如此,css ...

  5. CSS图片列表

    1.效果图: 2.Example Source Code <h3><a href="http://www.52css.com/">我爱CSS画廊</a ...

  6. css3 transition属性变化与animation动画的相似性以及不同点

    下面列子中的2个图片的效果. http://zqtest.e-horse.cn/DongXueImportedCar/assets/mouseOverAnimate.html 第一个为transiti ...

  7. css less

    LESSCSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量.继承.运算.函数等,更方便CSS的编写和维护. LESSCSS可以在多种语 ...

  8. web前端知识大纲:系列二 css篇

    web前端庞大而复杂的知识体系的组成:html.css和 javascript 二.css 1.CSS选择器 CSS选择器即通过某种规则来匹配相应的标签,并为其设置CSS样式,常用的有类选择器.标签选 ...

  9. 超全面的JavaWeb笔记day02<CSS&JavaScript>

    1.CSS的简介 2.CSS概述和与HTML的结合方式(四种)(*******) 3.CSS的基本选择器(******) 4.CSS的扩展选择器(了解) 5.CSS的盒子模型(了解) 6.CSS的布局 ...

随机推荐

  1. Linux vim编辑器常用命令

    Vim是一个类似于Vi的著名的功能强大.高度可定制的文本编辑器 常用的vim命令如下图 补充: num+命令 对命令执行num次,如  5dd:剪切一行 * 5  即剪切5行,其它如此 /text   ...

  2. sqlserver表结构查询语句

    SELECT syscolumns.name,systypes.name,syscolumns.isnullable,syscolumns.length FROM syscolumns, systyp ...

  3. sipp模拟电信运营商VoIP终端测试(SIP协议调试)

    三大运营商都有SIP服务器,用来支持语音对讲,多媒体调度等功能,他们的平台可能不是标准的SIP协议会话. 为了应对没完没了的对接各个厂商的平台,这里再整理了一套协议脚本,毕竟全都是没有意义的无用功,标 ...

  4. confluence安装、破解+MariaDB驱动、汉化

    下载所需文件:http://fansik.edusaas.com/confluence/安装包:atlassian-confluence-5.8.10-x64.bin 汉化包:Confluence-5 ...

  5. 基于python3.6.6的scrapy环境部署+图像识别插件安装

    一.Python3.6.6安装1.安装依赖的二进制软件包yum -y install zlib zlib-devel bzip2 bzip2-devel ncurses ncurses-devel r ...

  6. Cloudflare发布全球最快的DNS

    宣布1.1.1.1:速度最快,隐私优先的消费者DNS服务   Cloudflare的使命是帮助建立更好的互联网.今天我们很高兴能够在推出1.1.1.1--互联网最快,首先保护隐私的消费者DNS服务的同 ...

  7. one hot coding -机器学习

    机器学习 数据预处理之独热编码(One-Hot Encoding) 问题由来 在很多机器学习任务中,特征并不总是连续值,而有可能是分类值. 例如,考虑一下的三个特征: ["male" ...

  8. EventFiringWebDriver网页事件监听(一)

    Selenium提供了很多的event listening functions来跟踪脚本执行过程中的events. How it works? 在注册了listener的webDriver里面,这些l ...

  9. SQL Server语句创建数据库和表——并设置主外键关系

    简单的创建数据库的 SQL 语句: use master go if exists(select * from sysdatabases where name='Test') begin select ...

  10. 斐迅面试记录—SSL和TLS的区别

    SSL 是洋文“Secure Sockets Layer”的缩写,中文叫做“安全套接层”.它是在上世纪90年代中期,由网景公司设计的.(顺便插一句,网景公司不光发明了 SSL,还发明了很多 Web 的 ...