码迷,mamicode.com
首页 > Web开发 > 详细

css实现爱心效果

时间:2017-08-28 23:54:32      阅读:645      评论:0      收藏:0      [点我收藏+]

标签: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实现爱心效果

标签:logs   width   htm   position   before   lov   pre   blog   images   

原文地址:http://www.cnblogs.com/qmdx00/p/7442305.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!