首页 > 代码库 > 转载文章 利用旋转正方形与图形的组合实现爱心
转载文章 利用旋转正方形与图形的组合实现爱心
实现爱心效果图
源码
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>
文章转载 【CSS进阶】伪元素的妙用--单标签之美
转载文章 利用旋转正方形与图形的组合实现爱心
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。