转载 【CSS进阶】伪元素的妙用--单标签之美
1.单个颜色实现按钮 hover 、active 的明暗变化
请点击 转载利用伪元素单个颜色实现 hover 和 active 时的明暗变化效果
2.利用after伪类清除浮动
.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
.clearfix { *zoom:1; }
3.增强用户体验，使用伪元素实现增大点击热区。适合用在点击区域较小的移动端,PC端看上去是很奇怪的哦
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/>标签
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.变形恢复【为了平面图形变形后可以不让文字变形】
菱形diamond
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>
平行四边形 parallelogram
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>
梯形 trapezoid
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效果按钮放大背景变暗效果
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进阶】伪元素的妙用--单标签之美
