animation练习3之七夕篇

最新推荐文章于 2024-10-03 22:44:26 发布

花开花落的博客

最新推荐文章于 2024-10-03 22:44:26 发布

阅读量82

点赞数

文章标签：前端 css css3

本文链接：https://blog.csdn.net/weixin_42028153/article/details/132426817

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link
        rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
    />
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            width: 100vw;
            height: 100vh;
            background: #000;
            color: #fff;
            font-size: large;
            font-family:Georgia, 'Times New Roman', Times, serif;
        }
        .main{
            width: 100px;
            height: 100px;
            margin: 0 auto;
            background: red;
            position: relative;
            transform: rotate(45deg);
            animation-name: heart;
            animation-duration: 3s;
            animation-iteration-count: infinite;
        }
        .circle{
            width: 100px;
            height: 100px;
            background: red;
            border-radius: 50%;
            position: absolute;
            left: -50px;
        }
        .circle2{
            width: 100px;
            height: 100px;
            background: red;
            border-radius: 50%;
            position: absolute;
            left: 0; 
            top: -50px;
        }
        @keyframes heart {
            25%{
                transform: rotate(45deg) scale(0.8);
            }
            50%{
                transform: rotate(45deg) scale(1);
            }
            75%{
                transform: rotate(45deg) scale(0.8);
            }
            to{
                transform: rotate(45deg) scale(1);
            }
        }
        /* //从Animate.css版本4开始，可以自定义属性来定义动画的持续时间、延迟、迭代 */
        .animate__animated.animate__bounce {
            --animate-duration: 5s;
            --animation-delay: 5s;
        }
    </style>
</head>
<body>
    <div class="animate__animated animate__heartBeat">Animate.css</div>
    <div class="animate__animated animate__bounce">一生所见，都是你璀璨的笑</div>
    <div class="animate__animated animate__flash">愿有岁月可回首，且以深情共白头</div>
    <div class="main">
        <div class="circle"></div>
        <div class="circle2"></div>
    </div>
</body>
</html>