随笔- 38 文章- 0 评论- 1 阅读- 24218

CSS3-animation实现走马灯效果

动画animation

1.先定义动画：

@keyframes 动画名称(

from{}

to{}

)

或者

@keyframes 动画名称(

0%{}

50%{}

100%{}

)

百分号指的是动画时长的占比。

2.使用动画

在需要使用动画的元素中添加

animation：动画名称动画时长速度曲线延迟时间重复次数动画方向完毕时状态。其中前两个动画名称和动画时长是必须的，其余的属性选填，且没有顺序要求

案例：利用animation实现走马灯动画效果如下

代码如下

 1 <div class="box">
 2         <ul>
 3             <li><img src="../images/product.jpeg" alt=""></li>
 4             <li><img src="../images/car.jpg" alt=""></li>
 5             <li><img src="../images/bg.jpg" alt=""></li>
 6             <li><img src="../images/1.jpg" alt=""></li>
 7             <li><img src="../images/fm.jpg" alt=""></li>
 8             <li><img src="../images/play.png" alt=""></li>
 9 
10             <!--每次在box中可视范围是（610-2*5）/150=4四张图片，当移动至最后几张时，会导致空白出现，为了保证走马灯的无缝隙，将最初未移动时可视范围内的几张图片添加至末尾以遮住留白 -->
11             <li><img src="../images/product.jpeg" alt=""></li>
12             <li><img src="../images/car.jpg" alt=""></li>
13             <li><img src="../images/bg.jpg" alt=""></li>
14             <li><img src="../images/1.jpg" alt=""></li>
15         </ul>
16     </div>

 1 <style>
 2     * {
 3         margin: 0;
 4         padding: 0;
 5         box-sizing: border-box;
 6     }
 7 
 8     ul {
 9         list-style: none;
10     }
11 
12     .box {
13         margin: 100px auto;
14         width: 610px;
15         height: 110px;
16         border: 5px solid black;
17 
18         overflow: hidden;
19     }
20 
21     .box ul {
22         /* 如果不设置ul的宽度会导致li浮动的时候由于父级元素的宽度不够而换行，所以ul需要设置足够的宽度呈放所有的li 10*150=1500 */
23         width: 1500px;
24 
25         /* 使用动画 */
26         /* linear匀速运动 */
27         animation: move 4s infinite linear;
28     }
29 
30     /* 当鼠标移入box中的时候动画停止，移出动画继续 */
31     .box:hover ul{
32         animation-play-state: paused;
33     }
34 
35     .box li {
36         float: left;
37         width: 150px;
38         height: 100px;
39     }
40 
41     .box li img {
42         width: 150px;
43         height: 100px;
44     }
45 
46     /* 定义动画 */
47     @keyframes move{
48         /* from 是从原始位置出发，所以可以省略 */
49         to{
50             /* 移动至添加最初四个li之前的最后一个li（150*6=900），此时如果未在li末尾进行添加就会导致空白出现 */
51             transform: translate(-900px);
52         }
53     }
54 </style>