Css-深入学习之单个颜色实现 hover 和 active 时的明暗变化效果

本文是作者从别的网站和文章学习了解的知识，简单做了个笔记，想要学习更多的可以参考这里：【css进阶】伪元素的妙用--单标签之美，奇思妙想

（1、normal）（2、hover）（3、active）

 1   /*建立一个带圆角矩形*/
 2          .pesudo{  
 3           position: relative;
 4           margin-top:80px;
 5           width: 120px;
 6           height:120px;
 7           border-radius:1em;
 8           background:#00aabb;
 9           cursor:pointer;
10         }
11          /*用before设置好一个hover的状态*/
12         .pesudo:before{
13           position: absolute;
14           display:block;
15           top: 0; right: 0; bottom: 0; left: 0;
16           z-index:1;
17           border-radius:1em;
18           background:rgba(0,0,0,.1);
19         }
20         /*当元素hover的时候就出现设置好的before*/
21         .pesudo:hover:before{
22           content:"";
23         }
24         /*用after设置好一个active的状态*/
25         .pesudo:after{
26           position: absolute;
27           top: 0; right: 0; bottom: 0; left: 0;
28           z-index:1;
29           border-radius:1em;
30           background:rgba(255,255,255,.2);
31         }
32         /*当元素active得而时候就出现设置好的after*/
33         .pesudo:active:after{
34           content:"";
35         }

ok，然后就轻松实现了

 

posted @ 2016-11-09 15:59  YanEr、  阅读(1974)  评论(0)  编辑  收藏  举报