.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. mysql 约束条件 auto_increment 自动增长

    约束字段为自动增长,被约束的字段必须同时被key约束 id自动增长,每插入一条记录,自动增长 创建一张表 t20 id 字段设置为 不为空 唯一 自动增长 mysql)); Query OK, row ...

  2. SSO之CAS基础及应用视频教程(1)

    CAS介绍     CAS = Central Authentication Service,中央认证服务.CAS 是 Yale 大学发起的一个开源项目,能够为 Web 应用系统或者非Web应用系统提 ...

  3. 注册表REG文件编写大全

    Windows 中的注册表文件( system.dat 和 user.dat )是 Windows 的核心数据库,因此,对 Windows 来说是非常重要的. 通过修改注册表文件中的数据,可以达到优化 ...

  4. nanomsg(ZeroMQ with C)

    1.应用手册 https://github.com/nanomsg/nanomsg % mkdir build % cd build % cmake .. % cmake --build . % ct ...

  5. HTTP中的header头解析说明

    HTTP的头信息比较多,这里根据实际例子作出说明.下面图片是访问 http://kccdzz.com 的一个HTTP请求的header信息,可以看出Headers主要分为Response Header ...

  6. Selenium+Python学习之一

    刚入门selenium+Python,实验成功之后,记录一下过程. 首先是在知乎上面看到一个关于selenium+python的示例,于是自己便尝试搭建环境上手实验. 按照作者的代码敲一遍之后执行,竟 ...

  7. linux mysql备份

    许多备份方案: http://blog.jobbole.com/14012/ 采用的: mysqldump ---user admin ---password=password mydatabase ...

  8. java 并发——内置锁

    坚持学习,总会有一些不一样的东西. 一.由单例模式引入 引用一下百度百科的定义-- 线程安全是多线程编程时的计算机程序代码中的一个概念.在拥有共享数据的多条线程并行执行的程序中,线程安全的代码会通过同 ...

  9. 手写Bind

    Function.prototype.bind2 = function(context){ var self = this; var args = [].slice.call(arguments,1) ...

  10. jvm2

    垃圾回收器的实现: 1.让用户都暂停,不再产生垃圾,就去收集垃圾.新生代用复制算法清理垃圾,老生代用标记整理算法搜集垃圾. 优秀的算法:服务端默认是CMS收集器. %..jvm案例演示 内存: Jco ...