轉載利用僞元素單個顏色實現 hover 和 active 時的明暗變化效果

時間 2019-11-30

標籤轉載利用元素單個顏色實現 hover active 明暗變化效果简体版

原文原文鏈接

1.顏色小tip知識css

　　在背景色上方疊加一個黑色半透明層 rgba(0,0,0,.2) 能夠獲得一個更暗的顏色html

　　在背景色上方疊加一個白色半透明層 rgba(255,255,255,.2) 能夠獲得一個更亮的顏色post

單個顏色實現 hover 和 active 時的明暗變化效果url

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>單個顏色實現 hover 和 active 時的明暗變化效果</title>
 6     <style type="text/css">   
 7         a {
 8             text-decoration: none;
 9         }
10         .rubby {
11             position: absolute;
12             left: 50%;
13             top: 50%;
14             transform: translate(-50%,-50%); /*觸發層疊上下文*/
15             width: 260px;
16             text-align: center;
17             padding: 40px;
18             font-size: 200%;
19             font-weight: bolder;
20             background-color: #00aabb;
21             color: #fff;
22             cursor: pointer;
23             border-radius: 1em;
24         }
25 
26         .rubby:before {
27             position: absolute;
28             left: 0;
29             top: 0;
30             right: 0;
31             bottom: 0;
32             border-radius: 1em;
33             background-color: rgba(255,255,255,.2);
34             z-index: -1;
35         }
36         .rubby:hover:before {
37             content: "";
38         }
39         .rubby:after {
40             position: absolute;
41             left: 0;
42             top: 0;
43             right: 0;
44             bottom: 0;
45             background-color: rgba(0,0,0,.3);
46             border-radius: 1em;
47             z-index: -1;
48         }
49         .rubby:active:after {
50             content: "";
51         }
52 
53     </style>
54 </head>
55 <body>
56     <a href="#none" class="rubby">.Rubby</a>
57 </body>
58 </html>