.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. 配置MDM的描述文件

    配置描述文件 首先需要一个 MDM 配置描述文件,此文件用于安装到设备上,使其向 MDM 服务器注册为受管理的设备. 1.凭证 用iphone配置使用工具,新建一个配置描述文件,在“凭证”栏,创建新凭 ...

  2. 跟我学Makefile(一)

    1.首先,把源文件编译生成中间代码文件,Windows下.obj文件,unix下.o文件,即Object File.这个动作叫编译(compile) 把大量的Object File合并执行文件,叫做链 ...

  3. 使用Spring注解获取配置文件信息

    需要加载的配置文件内容(resource.properties): #FTP相关配置 #FTP的IP地址 FTP_ADDRESS=192.168.1.121 FTP_PORT=21 FTP_USERN ...

  4. 深度分析ORACLE热点块问题

    1.热点块的定义 数据库的热点块,从简单了讲,就是极短的时间内对 少量数据块进行了过于频繁的访问.定义看起来总是很简单的,但实际在数据库中,我们要去观察或者确定热点块的问题,却不是那么简单了.要深刻地 ...

  5. jQuery实现复选框 全选、反选、全不选

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  6. JDB调试代码 20165324 何春江

    Java书本程序调试: 课上程序调试

  7. vim初级命令

    命令 说明 光标移动   h 左 l(小写L) 右 j 下 k 上 w 移动到下一个单词 b 移动到上一个单词     插入   i 在当前光标处进行编辑 I(大写i) 在行首插入 A 在行末插入 a ...

  8. 【python】win10中python3.5.2输入pip出现Fatal error in launcher: Unable to create process using '"'

    系统:windows 10 python版本:3.5.2 出现的错误如下: C:\Users\zhuxy>pip list Fatal error in launcher: Unable to ...

  9. NIO 01 (转)

    本文转自:http://www.cnblogs.com/littlehann/p/3720396.html 目录 1. NIO.NIO.2简介 2. NIO中的关键技术 1. NIO.NIO.2简介 ...

  10. Selenium+Python常见定位方法

    参见官网:http://selenium-python.readthedocs.io/locating-elements.html 有多种策略来定位页面中的元素.你可以使用最适合你的情况.Seleni ...