web的动画如何实现

最新推荐文章于 2024-02-18 09:23:49 发布

以羽之名

最新推荐文章于 2024-02-18 09:23:49 发布

阅读量165

点赞数

文章标签：前端 css

本文链接：https://blog.csdn.net/g13753730391/article/details/131833567

版权

数据在网络上是以很小的称为帧（Frame）的单位传输的，帧由几部分组成，不同的部分执行不同的功能

动画最大的特点可以不用鼠标触发，自动的，反复的执行某些动画。

动画使用分为定义和调用：

1.定义：

/* 1. 定义的动画 */
@keyframes dance {
/* 第一个状态 */
    from {
        transform: scale(1)
    }
/* 最后一个状态 */
    to {
        transform: scale(1.5)
    }
}

或者

 /* 1. 定义的动画 */
    @keyframes dance {
/* 第一个状态 */
       0% {
        transform: scale(1)
      } 
/* 最后一个状态 */
      100% {
        transform: scale(1.5)
      }
    }

2.调用

img {
    width: 200px;
    /* 2. 使用动画  animation: 动画名称 执行时间;   infinite 循环*/
    animation: dance .5s infinite;
}

动画属性

animation:动画名称动画时长速度曲线延迟时间重复次数动画方向执行完毕时状态;

1.动画名字参照css类选择器命名

2.动画时长和延迟时间别忘了带单位 s

3.infinate 无限循环动画（重复次数）

4.alternate 为反向就是左右来回执行动画（跑马灯）

5.forwards 动画结束停留在最后一帧状态，不循环状态使用

6.linear 让动画匀速执行 steps() 逐帧动画

注意点:动画的结束状态无法和动画的重复次数以及动画的方向一起使用

鼠标经过暂停动画

/* 鼠标经过box，  则 ul 停止动画 */
.box:hover ul {
    animation-play-state: paused;
}

多组动画

/* 我们想要2个动画一起执行  animation: 动画1, 动画2, ... 动画n */
animation: run 1s steps(12) infinite, move 5s linear forwards;

这个是动画做的跑马灯效果


<!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>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 600px;
            height: 150px;
            border: 10px solid #000;
            margin: 100px auto;
            /* 溢出隐藏 */
            overflow: hidden;
        }

        .box .box-images {
            display: flex;
            width: 1400px;
            /* 添加动画 */
            animation: move 7s linear infinite;
        }

        .box-images:hover {
            /* 暂停动画 */
            animation-play-state: paused;
        }

        .box img {
            width: 200px;
            height: 150px;
            /* 添加鼠标小手效果 */
            cursor: pointer;
        }


        /* 移动大盒子,让图片跟着盒子移动一起移动 */
        @keyframes move {
            0% {
                transform: translate(0, 0);
            }

            100% {
                transform: translate(-1400px, 0);
            }
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box-images">
            <img src="./images/1.jpg" alt="">
            <img src="./images/2.jpg" alt="">
            <img src="./images/3.jpg" alt="">
            <img src="./images/4.jpg" alt="">
            <img src="./images/5.jpg" alt="">
            <img src="./images/6.jpg" alt="">
            <img src="./images/7.jpg" alt="">
            <!-- 解决走马灯的留白问题 -->
            <img src="./images/1.jpg" alt="">
            <img src="./images/2.jpg" alt="">
            <img src="./images/3.jpg" alt="">
        </div>
    </div>
</body>

</html>