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

最新推荐文章于 2023-07-05 18:35:34 发布

香荣如梦

最新推荐文章于 2023-07-05 18:35:34 发布

阅读量784

点赞数 1

分类专栏： css 文章标签：心形

本文链接：https://blog.csdn.net/my466879168/article/details/107646262

版权

css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

个人博客已经建好，欢迎各位前来访问 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);
  }

效果如下:

然后添加前伪元素：

.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;
  }

全部代码如下：

<!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>

香荣如梦

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
使用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
复制链接

扫一扫