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>
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>
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>
平行四邊形 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>
梯形 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>
純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>
文章轉載 【CSS進階】僞元素的妙用--單標籤之美