CSS动画的简易演示

最新推荐文章于 2024-01-15 00:00:00 发布

BAO__K

最新推荐文章于 2024-01-15 00:00:00 发布

阅读量326

点赞数

分类专栏：基础 css 动画文章标签： css 动画前端

本文链接：https://blog.csdn.net/BAO__K/article/details/126077162

版权

基础同时被 3 个专栏收录

10 篇文章 0 订阅

订阅专栏

css

6 篇文章 0 订阅

订阅专栏

动画

2 篇文章 0 订阅

订阅专栏

一、基本步骤

①定义动画
@keyframes 动画名字 {
from {动画的初始状态}
to {动画的结束状态}
}
②调用动画
animation ：动画名称动画播放时间；

为方便观看可以设置的动画时长久一些

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .box {
                width: 100px;
                height: 100px;
                background-color: rgb(130, 35, 130);
                animation: move 1s;
            }
            @keyframes move {
                from {
                    transform: translate(0,0);
                }
                to {
                    transform: translate(800px,0);
                }
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
    </html>

二、多步动画演示

区别在于定义动画版块

@keyframes 动画名字 {
0% {动画状态}

25%{动画状态}

50%{动画状态}

75%{动画状态}

100%{动画状态}

}

0%相当于from都是动画的起始状态，如果起始状态没有任何变化那么可以省去；

100%相当于是to都是动画的结束状态；

中间的步骤可以根据需要进行区分。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .box {
                width: 100px;
                height: 100px;
                background-color: rgb(130, 35, 130);
                border-radius: 50%;
                animation: move 5s;
            }
            @keyframes move {
                0% {
                    transform: translate(0,0);
                }
                10%{
                    transform: translate(800px,0);
                }
                20% {
                    transform: translate(800px,400px);
                }
                50% {
                    transform: translate(0,400px);
                }
                100% {
                    transform: translate(0,0);
                }
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
    </html>
</body>
</html>

三、动画的属性

animation:动画名字，动画时长，动画速度，延迟时间，重复次数，动画方向，动画执行完毕时状态；

动画速度一般记住linear（匀速）就行；动画方向是alternate（反方向回去）；

重复次数infinite（无限循环）；动画执行完毕时状态forwards（最后一帧状态）、backwards（第一帧状态）；

animation-play-state paused 搭配：hover用在轮播图中鼠标经过暂停的作用

四、轮播图案例演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li {
            list-style: none;
            float: left;
        }
        .box {
            width: 600px;
            height: 150px;
            margin: 50px auto;
            overflow: hidden;
        }
        .box ul {
            width: 2000px;
            height: 150px;
            animation: move 10s linear infinite;
        }
        img {
            width: 200px;
            height: 150px;
        }
        @keyframes move {
            100% {
                transform: translate(-1400px,0);
            }
        }
        .box:hover ul{
            animation-play-state: paused;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li><a href="#"><img src="https://img2.baidu.com/it/u=3735799021,1953155234&fm=253&fmt=auto&app=138&f=JPEG?w=485&h=730" alt=""></a></li>
            <li><a href="#"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp05%2F19100220062L3N-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661778071&t=47f1db31b9d6c7f80c7470b9a7adcaa7" alt=""></a></li>
            <li><a href="#"><img src="https://img1.baidu.com/it/u=3384796346,381674655&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""></a></li>
            <li><a href="#"><img src="https://img2.baidu.com/it/u=436635185,1433075744&fm=253&fmt=auto&app=138&f=JPEG?w=666&h=500" alt=""></a></li>
            <li><a href="#"><img src="https://img0.baidu.com/it/u=2725915437,1236608227&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500" alt=""></a></li>
            <li><a href="#"><img src="https://img2.baidu.com/it/u=729848000,3329744059&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt=""></a></li>
            <li><a href="#"><img src="https://img1.baidu.com/it/u=2003496092,3295249130&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=313" alt=""></a></li>
            <li><a href="#"><img src="https://img2.baidu.com/it/u=3735799021,1953155234&fm=253&fmt=auto&app=138&f=JPEG?w=485&h=730" alt=""></a></li>
            <li><a href="#"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp05%2F19100220062L3N-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661778071&t=47f1db31b9d6c7f80c7470b9a7adcaa7" alt=""></a></li>
            <li><a href="#"><img src="https://img1.baidu.com/it/u=3384796346,381674655&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""></a></li>
        </ul>
    </div>
</body>
</html>

为了体现没有间断，如果可视区域显示是三个图片那就在最后再多加三个和前三个一样的图片，两个那就多两个。