C3_animation复习_c3 animation-优快云博客

本文链接：https://blog.youkuaiyun.com/Amethystlry/article/details/112974825

本文介绍了如何在HTML和CSS中使用animation属性创建动态效果，包括一个云彩案例，通过关键帧定义了云朵的移动和背景渐变。还展示了如何控制动画的播放、暂停和填充模式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

animation的属性&动画的添加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /*
        * 必须要有animation-name和animation-duration
        *
        * animation-name:指定动画名称
        *
        * animation-duration:设置动画的总耗时
        *
        * animation-iteration-count:设置动画播放的次数，默认为1次，infinite（无限次）
        *
        * animation-direction:alternate 设置交替动画 默认不交替
        *
        * animation-delay:设置动画的延迟
        *
        * animation-timing-function:linear 动画的速度曲线 默认是ease
        *
        * animation-play-state:paused  设置动画的播放状态  running
        *
        * animation-fill-mode:设置动画结束的状态：默认情况下，动画执行完毕之后，会回到初始状态
        *
        * forwards:会保留动画结束时的状态，在有延迟的情况下，并会立即进到动画的初始状态
        *
        * backwards:不会保留，在有延时的情况下也会立即进入到动画的初始状态
        *
        * both:会保留动画结束时的状态，在有延时的情况下也会立刻进入到动画的初始状态
        *
        * */
    </script>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: #4e6ef2;
            animation: move 5s ease infinite alternate;
            animation-play-state: paused;
            /*animation-fill-mode: forwards;*/
        }
        @keyframes move {
            0%{
                transform: translateX(0);
            }
            50%{
                transform: translate(400px,400px) scale(1.5) skew(35deg,20deg);
            }
            100%{
                transform: translate(850px,10px) scale(1) skew(0deg,20deg);
            }
        }
    </style>
</head>
<body>
<div id="box"></div>
<input type="button" value="暂停" id="pause">
<input type="button" value="播放" id="running">
<script>
    var obj=document.querySelector('#box');
    document.querySelector('#pause').onclick=function () {
        obj.style.animationPlayState='paused';
    };
    document.querySelector('#running').onclick=function () {
        obj.style.animationPlayState='running';
    };
</script>
</body>
</html>

在这里插入图片描述

云彩案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变化的云彩</title>
    <style>
        html,body{
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
        .cloud{
            width: 100%;
            height: 100%;
            background: lightskyblue;
            overflow: hidden;
            position: relative;

            /*背景颜色渐变*/
            animation: bg 10s linear infinite;
        }
        .cloud div{
            width: 300%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }

        /*设置第一片云*/
        .cloud div:nth-child(1){
            background-image: url(cloud_one.png);
            animation: move 20s ease infinite;
        }

        /*设置第二片云*/
        .cloud div:nth-child(2){
            background-image: url(cloud_two.png);
            animation: move 30s ease infinite;
        }

        /*设置第三片云*/
        .cloud div:nth-child(3){
            background-image: url(cloud_three.png);
            animation: move 35s ease infinite;
        }
        /*背景渐变*/
        @keyframes bg {
            0%{
                background-color: skyblue;
            }
            50%{
                background-color: #4e6ef2;
            }
            100%{
                background-color: skyblue;
            }
        }

        /*云彩移动*/
        @keyframes move {
            0%{
                left: 0;
            }
            100%{
                left: -200%;
            }
        }
    </style>
</head>
<body>
    <div class="cloud">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

在这里插入图片描述