使用css制作跳动的心

最新推荐文章于 2024-05-16 01:31:40 发布

香荣如梦

最新推荐文章于 2024-05-16 01:31:40 发布

阅读量574

点赞数 1

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

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

版权

css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

利用css动画制作跳动的心

代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="./moment.js"></script>
    <script src="./01.js"></script>
    <title>跳动的心</title>
  </head>
  <style type="text/css">
    .back {
      position: fixed;
      padding: 0;
      margin: 0;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: white;
      animation-name: backdiv;
      animation-duration: 1s;
      animation-iteration-count: infinite;
    }

    .heart {
      position: absolute;
      margin: auto;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: pink;
      height: 50px;
      width: 50px;
      transform: rotate(-45deg);
      animation-name: beat;
      animation-duration: 1s;
      animation-iteration-count: infinite;
    }
    .heart:after {
      background-color: pink;
      content: "";
      border-radius: 50%;
      position: absolute;
      width: 50px;
      height: 50px;
      top: 0px;
      left: 25px;
    }
    .heart:before {
      background-color: pink;
      content: "";
      border-radius: 50%;
      position: absolute;
      width: 50px;
      height: 50px;
      top: -25px;
      left: 0px;
    }

    @keyframes backdiv {
      50% {
        background: #ffe6f2;
      }
    }

    @keyframes beat {
      0% {
        transform: scale(1) rotate(-45deg);
      }
      50% {
        transform: scale(0.6) rotate(-45deg);
      }
    }
  </style>
  <body>
    <div class="back"></div>
    <div class="heart"></div>
  </body>
</html>

香荣如梦

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
使用css制作跳动的心

利用css动画制作跳动的心代码如下：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="./moment.js"></script> &l
复制链接

扫一扫

专栏目录