Html
    Css
    Js

    
                        
 * {
	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;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:2.1.4
 立即下载

css3无缝轮播代码

更新时间:2022-12-02 23:43:23

纯css3 无缝轮播

0