实现一个简单的爱心效果

爱心

先来说一下爱心的实现原理在用两个div改变宽高，还用到CSS3 border-radius 圆角属性,CSS3 transform 属性,把两个div按一定角度叠在一起就行形成了如上效果,爱心的角度是我在浏览器控制台手动调出来的，下面直接上代码。

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>爱心效果</title>
 <style>

*{
  margin:0 ;
  padding:0;/*清除默认样式*/
}

    .right {
    width: 80px;
    height: 120px;
    background-color: red;
    transform: rotate(45deg);/* 顺时钟旋转45*/
    border-radius: 45px 60px 0px 20px;/*设置圆角属性*/
   
    margin-left: 53px;
}
.left {
    width: 80px;
    height: 120px;
    background-color: red;
    transform: rotate(-45deg); /* 定义 2D 旋转，逆时针旋转45*/
    border-radius: 45px 60px 30px 0px;/*设置圆角属性*/
    margin-bottom: -117px;/* 下外边距*/
    margin-left: 21px;/* 用来移动元素*/
}
.love {
    width: 150px; /*设置宽高*/
    height: 150px;
    background-color: rgba(49, 172, 185, 0.66);/*背景颜色*/
    margin: 200px auto;/*外面的div居中*/
}
 </style>
 </head>
 <body>
  <div class="love">
  
   <div class="left"></div>/*左边的div*/
  <div class="right"></div>/*右边的div*/
    </div>
 </body>
</html>

下面介绍一下CSS3 border-radius 指定每个圆角
如果你在 border-radius 属性中只指定一个值，那么将生成 4 个圆角。
但是，如果你要在四个角上一一指定，可以使用以下规则：
四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
一个值：四个圆角值相同

实现一个简单的爱心效果

推荐阅读更多精彩内容