轉載 【CSS進階】僞元素的妙用--單標籤之美

1.單個顏色實現按鈕 hover 、active 的明暗變化html

  

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

2.利用after僞類清除浮動post

.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
.clearfix { *zoom:1; }

3.加強用戶體驗,使用僞元素實現增大點擊熱區。適合用在點擊區域較小的移動端,PC端看上去是很奇怪的哦url

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>擴大點擊熱區域</title>
 6         <style>
 7             .click-area {
 8                 position: absolute;
 9                 left: 50%;
10                 top: 50%;
11                 transform: translate(-50%,-50%); /*觸發層疊上下文*/
12                 width: 240px;
13                 text-align: center;
14                 line-height: 100px;
15                 background-color: #00aabb;
16                 color: #fff;
17                 font-size: 200%;
18                 border-radius: .5em;
19             }
20             .click-area:hover:after {
21                 content: "AAA";
22             }
23             .click-area:after {
24                 position: absolute;
25                 left: -10px;
26                 top: -10px;
27                 right: -10px;
28                 bottom: -10px;
29                 background-color: deeppink;
30                 border-radius: .5em;
31                 z-index: -1;
32             }
33         </style>
34     </head>
35     <body>
36         <a class="click-area">click-Area</a>
37     </body>
38 </html>
View Code

4.利用僞類元素實現換行,替換<br/>標籤spa

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>利用僞類實現換行,替換br標籤</title>
 6         <style>
 7             body {
 8                 font: 150%/1.6 Baskerville, Palatino, serif;
 9             }
10             dt, dd {
11                 display: inline;
12                 margin: 0;
13             }
14             dd {
15                 font-weight: 600;
16             }
17             dt::after {
18                 content: "\A"; /*換行*/
19                 white-space: pre;
20             }
21             dd + dd::before {
22                 content: ', ';
23                 font-weight: normal;
24                 margin-left: -.25em;
25             }
26         </style>
27     </head>
28     <body>
29         <dl>
30             <dt>書籍分類</dt>
31             <dd>經典著做  · 哲學類  </dd>
32             <dd>社會科學  · 政治法律  </dd>
33             <dd>軍事科學  · 財經管理</dd>
34             <dd>歷史地理  · 文化教育  </dd>
35         </dl>
36     </body>
37 </html>
View Code

5.變形恢復【爲了平面圖形變形後能夠不讓文字變形】code

菱形diamondorm

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>菱形</title>
 6         <style>
 7             html {
 8                 font-family: "microsoft yahei";
 9             }
10             .diamond {
11                 position: absolute;
12                 left: 50%;
13                 top: 50%;
14                 transform: translate(-50%, -50%);
15                 width: 200px;
16                 line-height: 200px;
17                 text-align: center;
18                 color: #FFFFFF;
19                 font-size: 200%;
20             }
21             .diamond::before {
22                 content: "";
23                 position: absolute;
24                 left: 0;
25                 top: 0;
26                 bottom: 0;
27                 right: 0;
28                 background-color: deeppink;
29                 transform: rotateZ(45deg);
30                 z-index: -1;
31                     
32             }
33         </style>
34     </head>
35     <body>
36         <div class="diamond">.diamond</div>
37     </body>
38 </html>
View Code

平行四邊形 parallelogramhtm

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>平行四邊形</title>
 6         <style>
 7             html {
 8                 font-family: "microsoft yahei";
 9             }
10             .parallelogram {
11                 position: absolute;
12                 left: 50%;
13                 top:50%;
14                 transform: translate(-50%,-50%);
15                 width: 280px;
16                 text-align: center;
17                 line-height: 150px;
18                 font-size: 200%;
19                 color: #FFFFFF;
20             }
21             .parallelogram::before {
22                 content:"";
23                 position:absolute ;
24                 left: 0;
25                 right: 0;
26                 bottom: 0;
27                 top: 0;
28                 background-color: #00AABB;
29                 color: orangered;
30                 z-index: -1;
31                 transform: skew(-.07turn);
32             }
33         </style>
34     </head>
35     <body>
36         <div class="parallelogram">.parallelogram</div>
37     </body>
38 </html>
View Code

 梯形 trapezoidblog

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>利用旋轉與透視實現</title>
 6         <style>
 7              html {
 8                  font-family: "microsoft yahei";
 9              }
10             .trapezoid {
11                 position: absolute;
12                 left: 50%;
13                 top: 50%;
14                 transform: translate(-50%, -50%);
15                 width: 160px;
16                 text-align: center;
17                 padding: 60px;
18                 color: #FFF;
19                 font-size: 200%;
20             }
21             .trapezoid:after {
22                 content: "";
23                 position: absolute;
24                 left: 0;top: 0;right: 0;bottom: 0;
25                 background-color: #00aabb;
26                 /*perspective 透視   scale縮放  rotateX繞X軸旋轉*/
27                 transform:perspective(30px) scale(1.2) rotateX(5deg);  
28                 transform-origin: bottom;
29                 z-index: -1;
30             }
31         </style>
32     </head>
33     <body>
34         <div class="trapezoid">.trapezoid</div>
35     </body>
36 </html>
View Code

 純CSS實現hover效果按鈕放大背景變暗效果get

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>純CSS實現hover效果按鈕放大背景變暗效果</title>
 6         <style>
 7             html {
 8                 font-family: "microsoft yahei";
 9             }
10             .spectiveBlur {
11                 position: absolute;
12                 left: 50%;
13                 top: 50%;
14                 width: 220px;
15                 line-height: 160px;
16                 text-align: center;
17                 border-radius: 10px;
18                 transform: translate(-50%, -50%);
19                 background-color: #E91E63;111111
20                 font-size: 200%;
21                 color: #fff;    
22                 cursor: pointer;
23                 transition: transform .2s ;        
24             }
25             .spectiveBlur:hover {
26                 transform: translate(-50%, -50%) scale(1.2);
27                 box-shadow: 0 0 0 1920px rgba(0,0,0,.6);
28             }
29         </style>
30     </head>
31     <body>
32         <div class="spectiveBlur">.spectiveBlur</div>
33     </body>
34 </html>
View Code

 

文章轉載  【CSS進階】僞元素的妙用--單標籤之美

相關文章
相關標籤/搜索