* {
margin:0;
padding:0;
}
.swiper-content {
width:400px;
height:200px;
margin:90px auto;
overflow:hidden;
border:1px solid rosybrown;
}
.swiper-content ul {
width:1200px;
/* 300% */
transition:all 4s linear;
animation:swiper 10s linear infinite alternate;
/* 交替运动 */
}
ul:hover:hover {
/* 停止动画 */
animation-play-state:paused;
}
@keyframes swiper {
/* from {
transform:translateX(0px);
opacity:0.9;
}
to {
transform:translateX(-800px);
opacity:1;
}
*/
0% {
transform:translateX(0px);
opacity:0.7;
}
25% {
transform:translateX(-200px);
opacity:0.8;
}
50% {
transform:translateX(-400px);
opacity:0.9;
}
75% {
transform:translateX(-600px);
opacity:1;
}
100% {
transform:translateX(-800px);
opacity:1;
}
}li {
list-style:none;
float:left;
}
img {
width:400px;
height:200px;
box-sizing:border-box;
border:2px solid red;
}
更新时间:2022-12-02 23:43:23
纯css3 无缝轮播