使用css制作心形图案并且添加动画心动效果

个人博客已经建好，欢迎各位前来访问 http://mengyang.info/

纯css制作心形图案

首先制作一个正方形并且旋转45度

.heart{
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: pink;
    height: 50px;
    width: 50px;
    transform: rotate(-45deg);
  }

效果如下:

image-20200728213439691

然后添加前伪元素：

.heart::after{
    background-color: pink;
    content:"";
    border-radius: 50%;
    position: absolute;
    width: 50px;
    height: 50px;
    top: 0;
    left: 25px;
  }

image-20200728214002856

最后添加后伪元素：

.heart::before{
    content: "";
    background-color: pink;
    border-radius: 50px;
    position: absolute;
    width: 50px;
    height: 50px;
    top: -25px;
    left: 0;
  }

image-20200728214212802

全部代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>心形制作</title>
</head>
<style>
  .heart{
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: pink;
    height: 50px;
    width: 50px;
    transform: rotate(-45deg);
  }
  .heart::after{
    background-color: pink;
    content:"";
    border-radius: 50%;
    position: absolute;
    width: 50px;
    height: 50px;
    top: 0;
    left: 25px;
  }
  .heart::before{
    content: "";
    background-color: pink;
    border-radius: 50px;
    position: absolute;
    width: 50px;
    height: 50px;
    top: -25px;
    left: 0;
  }
</style>
<body>
  <div class="heart">

  </div>
</body>
</html>
posted @ 2020-07-28 21:53  香荣如梦  阅读(670)  评论(0)  编辑  收藏  举报