css實現愛心效果
阿新 • • 發佈：2017-08-28
htm meta mage gin pan ext abs div 七夕節
-------------------------------------
今天是七夕節，作為單身狗
的博主，今天給大家帶來個
愛心效果，希望大家早日
脫單（手動滑稽）
-------------------------------------
效果如上圖所示，下面貼上
代碼：
-------------------------------------
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5<title>demo</title> 6 <style type="text/css"> 7 *{ 8 margin:0; 9 padding:0; 10 } 11 .love{ 12 position:relative; 13 top:100px; 14 left:300px; 15 } 16 .love:before,.love:after{ 17 content: ""; 18 width: 70px; 19 height: 115px; 20 position: absolute; 21 background: red; 22 left: 70px; 23 top: 0; 24 border-radius: 50px 50px 0 0; 25 -webkit-transform: rotate(-45deg);26 -webkit-transform-origin: 0 100%; 27 } 28 .love:after{ 29 left: 0; 30 -webkit-transform: rotate(45deg); 31 -webkit-transform-origin: 100% 100%; 32 } 33 </style> 34 </head> 35 <body> 36 <div class="love"></div> 37 </body> 38 </html>
-------------------------------------
下面給大家分析一下實現
的原理：
1.首先繪制兩個重疊的
2.分別順時針和逆時針
旋轉45度角：
-------------------------------------
這樣，就完成了愛心的
繪制了，感謝大家的閱
讀；
css實現愛心效果