效果图
css3动画知识应用
指定动画名称：animation-name: moveTest;
定义动画
@keyframes moveTest {
0% {
transform: translate(100px);
}
50% {
transform: translate(100px, 200px);
}
100% {
transform: translate(200px, 400px);
}
}设置动画总耗时：animation-duration: 2s;
设置动画播放次数：animation-iteration-count: infinite; 默认为1次，可以指定数字，指定infinite为无限循环
设置动画交替执行：animation-direction: alternate; 从动画开始到结束，再倒过来执行
设置动画延时时间：animation-delay: 2s;
设置动画保留状态：animation-fill-mode: forwards;
设置动画时间函数：animation-timing-function: linear;匀速、变速
设置动画的播放状态 ：animation-play-state: running; paused 暂停 running 播放
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.window{
width:1000px;
height:138px;
border:1px solid #eeeeee;
margin:100px auto;
overflow: hidden;
}
.images_list{
width:2000px;
height:138px;
animation-name: move;
animation-duration: 4s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
img {
float: left;
width: 100px;
height: 138px;
}
.images_list:hover{
cursor:pointer;
animation-play-state: paused;
}
@keyframes move{
from{
transform:translate(0px);
}
to{
transform:translate(-1000px);
}
}
</style>
</head>
<body>
<div>
<div>
<img src="./public/images/pk1.jpg-600" alt="">
<img src="./public/images/pk2.jpg-600" alt="">
<img src="./public/images/pk3.jpg-600" alt="">
<img src="./public/images/pk4.jpg-600" alt="">
<img src="./public/images/pk5.jpg-600" alt="">
<img src="./public/images/pk6.jpg-600" alt="">
<img src="./public/images/pk7.jpg-600" alt="">
<img src="./public/images/pk8.jpg-600" alt="">
<img src="./public/images/pk9.jpg-600" alt="">
<img src="./public/images/pk10.jpg-600" alt="">
<img src="./public/images/pk1.jpg-600" alt="">
<img src="./public/images/pk2.jpg-600" alt="">
<img src="./public/images/pk3.jpg-600" alt="">
<img src="./public/images/pk4.jpg-600" alt="">
<img src="./public/images/pk5.jpg-600" alt="">
<img src="./public/images/pk6.jpg-600" alt="">
<img src="./public/images/pk7.jpg-600" alt="">
<img src="./public/images/pk8.jpg-600" alt="">
<img src="./public/images/pk9.jpg-600" alt="">
<img src="./public/images/pk10.jpg-600" alt="">
</div>
</div>
</body>
</html>以上就是怎样用css实现无缝轮播图切换？的详细内容，更多请关注0133技术站其它相关文章！
