纯css 制作简单的爱心

网页中我们用到爱心❤的地方不少，如看到一篇喜欢的文章给他点个赞，表白你喜欢的女孩，给他比个小心心什么的。

今天用纯css写一个简单的爱心。

简单思路如下：

1.先做一个盒子，里面包含两个小盒子

2.两个小盒子弄成一样大小的长方形

3.通过border-radius、transform，进行调整，整合成一个爱心

代码如下：

HTML部分：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> 爱心</title>
    </head>
    <body> 
        <div class="contain">
            <div class="right"></div>
            <div class="left"></div>
            
        </div>
    </body>
</html>

css部分：

 .contain{
                width: 300px;
                height:300px；
                margin:100px auto;
            }
            .left{
               float: left;
                width: 150px;
                height: 228px;
                background: red;
                border-radius: 100px 100px 0 0;
                transform:translateX(-95px) rotate(45deg);
                
            }
            .right{
                float: left;
                width: 150px;
                height: 228px;
                background: red;
                border-radius: 100px 100px 0 0;
                transform: rotate(-45deg);
            }

注：因各浏览器对css3支持不一的关系，所以需要在transform前加各种浏览器识别前缀，我这偷了个懒就没详细写上了。

-ms-transform:rotate(7deg); //-ms代表ie内核识别码
-moz-transform:rotate(7deg); //-moz代表火狐内核识别码
-webkit-transform:rotate(7deg); //-webkit代表谷歌内核识别码
-o-transform:rotate(7deg); //-o代表欧朋【opera】内核识别码
transform:rotate(7deg); //统一标识语句。

最后一句最好还是写上，符合w3c标准。

 



posted @ 2019-08-14 15:37  smile小吴  阅读(1824)  评论(0)  编辑  收藏  举报