標籤：logs width htm position before lov pre blog images
-------------------------------------
今天是七夕節，作為單身狗
的博主，今天給大家帶來個
愛心效果，希望大家早日
脫單（手動滑稽）
-------------------------------------
效果如所示，下面貼上
代碼：
-------------------------------------
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實現愛心效果
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
