css3 animation属性【案例】

Vvc_b

已于 2024-10-26 12:10:28 修改

阅读量719

点赞数 18

分类专栏： CSS 文章标签： css3 前端 css

于 2024-10-25 22:21:07 首次发布

本文链接：https://blog.youkuaiyun.com/m0_74897683/article/details/143244636

版权

CSS 专栏收录该内容

10 篇文章

订阅专栏

案例1

：背景颜色变换

效果展示：

css3 实现背景渐变

代码展示：

<style>
    html,body{
        height: 100%;
        width: 100%;
        background-image: Linear-gradient(45deg,#ff6348,#ffa502,#ff4757,#ff7f50,#eccc68);
        /* background-image: Linear-gradient(45deg,#cd91ee,#7352df81,rgb(105, 68, 184),#544871,#9d58cb,#6674ba); */
        background-size: 400%;
        animation: move 8s infinite alternate;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        font-size: 20px;
    }
    @keyframes move{
        0%{
            background-position: 0 50%;
        }
        50%{
            background-position: 100% 50%;
        }
        100%{
            background-position: 50% 0;
        }
    }
</style>
<body>
    <div class="text">
        Linear-gredient Animation
    </div>
</body>

案例1：

：延迟1s 开始，每幅图3s，循环播放，鼠标悬浮上去时暂停。

效果展示:

css 实现图片轮播

代码展示：

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .wrap{
        width: 800px;
        height: 400px;
        margin: 150px auto;
        overflow: hidden;
        position: relative;
     }
    .banner{
        list-style: none;
        width: 2400px;
        height: 400px;
        display: flex;
        flex-direction: row;
        position: absolute;
        top: 0;
        left: 0;
        animation: move 9s infinite alternate;
        animation-delay: 1s /*延时1s开始*/;
    }
    .banner:hover{
        animation-play-state: paused;/*鼠标放上去暂停*/
    }
    .banner li{
        width: 800px;
        height: 400px;
        
    }
    .banner li img{
        width: 100%;
        height: 100%;
    }
@keyframes move{
    0%{
        left: 0;
    }
    50%{
        left: -800px;
    }
    100%{
        left: -1600px;
    }
}
</style>
<body>
    <div class="wrap">
        <ul class="banner">
            <li><img src="../图片切换/41.jpg" alt=""></li>
            <li><img src="../图片切换/44.jpg" alt=""></li>
            <li><img src="../图片切换/5.jpg" alt=""></li>
        </ul>
    </div>
</body>

案例2：

：自动切换背景，3s

效果展示：

css 实现图片切换

代码展示：

<style type="text/css">
    body,html{
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }
    .banner{
        width: 100%;
        height: 100%;
        background-image: url("12.jpg");
        background-size: cover;
        animation: move 15s infinite alternate;
    }
    @keyframes move{
        0%{
            background-image: url("12.jpg");
        }
        20%{
            background-image: url("35.jpg");
        }
        40%{
            background-image: url("14.jpg");
        }
        60%{
            background-image: url("43.jpg");
        }
    }
</style>
<body>
    <div class="banner"></div>
</body>

注意：图片尺寸和页面大小不一样，可以通过backgroun-size设置，其值有auto，cover，contain，或具体指定。

示例3：

加载，上篇文章的加载需要鼠标悬浮上去才有效果，这个不需要可以一直转~~。

效果展示：

css 实现加载

代码展示：

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .main{
        width: 100px;
        height: 100px;
        /* border: 1px solid red; */
        margin: 200px auto;
        position: relative;
    }
    .main div{
        position: absolute;
        top:0 ;
        left: 50%;
        transform: translate(-50%,0);/*和left一起作用，使小球居中*/
        animation: myMove 1s infinite;
        border-radius: 50%;
        background-color: rgb(225, 202, 229);
        transform-origin: 50% 50px;
        /*50%表示为于元素的50%的位置，50px表示元素顶端向下50px 的位置*/
    }
    .main div:nth-child(1){
        width: 20px;
        height: 20px;
        background-color: cadetblue;
        animation-delay: 0s;
    }
    .main div:nth-child(2){
        width: 18px;
        height: 18px;
        background-color: cadetblue;
        animation-delay: 0.1s;
    }
    .main div:nth-child(3){
        width: 16px;
        height: 16px;
        background-color: cadetblue;
        animation-delay: 0.2s;
    }

    @keyframes myMove {
        to{
            transform: translate(-50%,0) rotate(1turn);
        }
    }
</style>
<body>
    <div class="main">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>

知识小天地：

animation
animation属性可以设置多个子属性，这些子属性定义了动画的名称、持续时间、时间函数、延迟、迭代次数和方向等。
复合使用：

animation : name duration timing-function delay iteration-count direction fill-mode ;

animation-name：定义动画的关键帧@keyframes的名称。
- 值：关键帧名称（identifier）
animation-duration：定义动画完成一个周期所需的时间。
- 值：时间（如 2s, 150ms）
- 初始值：0s
animation-timing-function：定义动画的速度曲线，即动画在各个阶段的快慢变化。
- 值：时间函数（如 linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier(x1, y1, x2, y2)）
- 初始值：ease
animation-delay：定义动画开始前的延迟时间。
- 值：时间（如 1s, 50ms）
- 初始值：0s
animation-iteration-count：定义动画的迭代次数。
- 值：数字（如 3）或 infinite
- 初始值：1
animation-direction：定义动画的播放方向。
- 值：normal（正常播放）, reverse（反向播放）, alternate（交替播放）, alternate-reverse（反向交替播放）
animation-fill-mode：定义动画在开始前和结束后如何应用样式。
- 值：none（无效果）, forwards（保持最后一个关键帧的样式）, backwards（保持第一个关键帧的样式）, both（同时应用前后关键帧的样式）
animation-play-state：定义动画的播放状态，是正在播放还是暂停。
- 值：running（播放）, paused（暂停）
  示例：

<style>
    *{
        margin: 0;
        padding: 0;
    }
    div{
        width: 100px;
        height: 100px;
        background-color: rgb(72, 167, 167);
        margin: 150px auto;

        animation: move 3s infinite alternate;
        animation-delay: 1s;
        /* animation-play-state: paused; */
    }
    @keyframes move{
        /* from{
            width: 100px;
            height: 100px;
        }
        to{
            width: 300px;
            height: 300px;
        } */
        0%{
            width: 100px;
            height: 100px;
        }
        50%{
            width: 200px;
            height: 200px;
        }
        100%{
            width: 300px;
            height: 300px;
        }
    }
</style>
<body>
   <div></div>
</body>