您的位置：首页 > Web前端 > CSS

纯css 制作简单的爱心

2020-02-03 04:51 911 查看

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

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

 


转载于:https://www.cnblogs.com/smile-xin/p/11352330.html

  • 点赞
  • 收藏
  • 分享
  • 文章举报
baiyong1930 发布了0 篇原创文章 · 获赞 1 · 访问量 172 私信 关注
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航