前端简单动画

最新推荐文章于 2024-11-12 11:19:19 发布

biemowomaomao

最新推荐文章于 2024-11-12 11:19:19 发布

阅读量235

点赞数 3

文章标签：前端

本文链接：https://blog.csdn.net/biemowomaomao/article/details/139026539

版权

/* 动画相关属性 */

/* 1过度动画

transition

transition-property:对html元素哪个属性进行处理

transition-duration:过度动画持续的时间

transition-timing-function:指定变化的速度

linear:线性速度

ease:开始较慢，然后加速，速度加到最大再减速

ease-in:由慢到快

ease-out:由快到慢

/* 2帧动画

animation

animation-name:设置动画的名称

animation-duration:设置动画持续的时间

animation-timing-function:指定变化的速度

linear:线性速度

ease:开始较慢，然后加速，速度加到最大再减速

ease-in:由慢到快

ease-out:由快到慢

animation-delay:设置帧动画的延迟时间

animation-iteration-count:设置帧动画执行的次数 infinite无限次执行

animation-direction:设置动画的方向 alternate(交替)

定义动画：

@keyframes identifier {
            to {
                color: #f0932b;
                text-shadow: 20px 0 35px #9c88ff;
            }
        }

css例子：

* {
            margin: 0;
            padding: 0;
        }
        
        body {
            background: black;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .text span {
            margin: 0 20px;
            color: aqua;
            /* 文字阴影 */
            text-shadow: 20px 0 35px #eb4d4b;
            font-size: 20vh;
            font-weight: 600;
            animation-name: identifier;
            animation-duration: 1s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }
        
        .text span:nth-child(2) {
            animation-delay: 0.2s;
        }
        
        .text span:nth-child(3) {
            animation-delay: 0.3s;
        }
        
        .text span:nth-child(4) {
            animation-delay: 0.4s;
        }
        
        .text span:nth-child(5) {
            animation-delay: 0.5s;
        }
        
        .text span:nth-child(6) {
            animation-delay: 0.6s;
        }
        
        .text span:nth-child(7) {
            animation-delay: 0.7s;
        }
        
        .text span:nth-child(8) {
            animation-delay: 0.8s;
        }

html例子：

<body>
    <div class="text">
        <span>I</span>
        <span>L</span>
        <span>O</span>
        <span>V</span>
        <span>E</span>
        <span>Y</span>
        <span>O</span>
        <span>U</span>
    </div>
</body>

结果呈现：

前端动画