-------------------------------------
今天是七夕节，作为单身狗
的博主，今天给大家带来个
爱心效果，希望大家早日
脱单（手动滑稽）
-------------------------------------
效果如上图所示，下面贴上
代码：
-------------------------------------
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度角：
-------------------------------------
这样，就完成了爱心的
绘制了，感谢大家的阅
读；
时间： 2025-01-01 08:05:09