文章目录
一、animation是什么?
动画效果:实现多个状态间的变化过程,动画过程可控(重复播放、最终画面、是否暂停)
二、使用步骤
1.定义动画
css动画代码如下(示例):
/* 定义动画 */
@keyframes move {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-1400px, 0);
}
}
/* 哪个需要执行动画就在元素中添加animation属性 animation: move(动画名称) 3s(动画时间); */
0%为开始转态相对于from,100%是结束转态,相当于to
css修饰代码:
* {
padding: 0;
margin: 0;
}
.box {
width: 600px;
height: 200px;
border: 10px solid #000;
margin: 200px auto;
overflow: hidden;
}
.box:hover ul {
/* 给轮播图添加鼠标经过停止的效果 */
animation-play-state: paused;
}
.box ul {
list-style: none;
width: 2000px;
/* 调用动画 */
animation: move 5s infinite linear;
}
.box li {
float: left;
}
.box li img {
width: 200px;
height: 200px;
}
2.html代码
代码如下(示例):
<body>
<div class="box">
<ul>
<li><img src="./imges/images/1.jpg" alt=""></li>
<li><img src="./imges/images/2.jpg" alt=""></li>
<li><img src="./imges/images/3.jpg" alt=""></li>
<li><img src="./imges/images/4.jpg" alt=""></li>
<li><img src="./imges/images/5.jpg" alt=""></li>
<li><img src="./imges/images/6.jpg" alt=""></li>
<li><img src="./imges/images/7.jpg" alt=""></li>
<!-- 解决留白问题 -->
<li><img src="./imges/images/1.jpg" alt=""></li>
<li><img src="./imges/images/2.jpg" alt=""></li>
<li><img src="./imges/images/3.jpg" alt=""></li>
</ul>
</div>
</body>
<每一张图片的大小为200px*200px>
总结
1.因为父盒子的宽度不够,所以需要给一个大的子盒子去装图片,然后给子盒子添加动画效果就可以实现轮播图效果!
2.在制作过程中会有一个bug,就是动画执行的时候会有留白,解决方法就是给子盒子在添加前三张图片,使其行成一个视觉差,行成一个循坏的轮播图效果.