标签：sla idt www for transform 技术 radius lin white
实现爱心效果图
源码
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 .heartShaped { 11 position: absolute; 12 left: 50%; 13 top: 50%; 14 transform: translate(-50%, -50%) rotate(45deg); 15 width: 140px; 16 line-height: 140px; 17 text-align: center; 18 font-size: 14px; 19 color: white; 20 background: rgba(255,20,147,.85); 21 } 22 .heartShaped:before, .heartShaped:after { 23 content: ""; 24 position: absolute; 25 left: -70px; 26 top: 0; 27 width: 140px; 28 height: 140px; 29 background: rgb(255,20,147); 30 border-radius: 50%; 31 z-index: -1; 32 } 33 .heartShaped:after { 34 left: 0px; 35 top: -70px; 36 } 37 </style> 38 </head> 39 <body> 40 <div class="heartShaped"> 41 heartShaped 42 </div> 43 </body> 44 </html>
标签：sla idt www for transform 技术 radius lin white
原文地址：http://www.cnblogs.com/zjf-1992/p/6067625.html
