纯css 制作简单的爱心

佐手、 提交于 2019-11-27 07:56:29

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

今天用纯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标准。

 



易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!