CSS3实现心跳动画

最新推荐文章于 2024-05-21 22:11:56 发布

Web阿成

最新推荐文章于 2024-05-21 22:11:56 发布

阅读量288

点赞数 4

文章标签： css3 css html 前端 javascript

本文链接：https://blog.csdn.net/a_strong_pig/article/details/134788713

版权

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        body{
            margin: 0;
            padding: 0;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #0b1522;
        }
        .heart{
            height: 70px;
            width: 70px;
            background-color: #f20044;
            transform: rotate(-45deg);
            box-shadow: -10px 10px 90px #f20044;
            animation: heart 0.6s linear infinite;
        }
        @keyframes heart {
            0%{
                transform: rotate(-45deg) scale(1.07);
            }
            80%{
                transform: rotate(-45deg) scale(1.0);
            }
            100%{
                transform: rotate(-45deg) scale(0.8);
            }
        }
        .heart:before{
            content: "";
            position: absolute;
            height: 70px;
            width: 70px;
            background-color: #f20044;
            top: -50%;
            border-radius: 50px;
        }
        .heart:after{
            content: "";
            position: absolute;
            height: 70px;
            width: 70px;
            background-color: #f20044;
            right: -50%;
            border-radius: 50px;
            box-shadow: -10px 10px 90px #f20044;
        }
    </style>
  </head>
  <body>
    <div class="heart"></div>
    <script></script>
  </body>
</html>