效果"/>
只用css和html实现简单的图片轮播效果
用css和html实现简单的图片轮播效果
三种方式：
1.直接变换
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>css动画</title><style>.one {width: 400px;height: 300px;animation-name: move;animation-duration: 10s;animation-iteration-count: infinite;}@keyframes move {0% {background-image: url("./image/1.jpg");background-size: cover;}20% {background-image: url("./image/2.jpg");background-size: cover;}40% {background-image: url("./image/5.jpg");background-size: cover;}60% {background-image: url("./image/4.jpg");background-size: cover;}80% {background-image: url("./image/6.jpg");background-size: cover;}100% {background-image: url("./image/1.jpg");background-size: cover;}}</style>
</head>
<body><div class="one"></div>
</body>
</html>
2.滑动效果
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>css实现轮播效果</title><style type="text/css">.one {position: absolute;width: 500px;height: 400px;overflow: hidden;}.one_cantent img {width: 500px;height: 300px;float: left;}.one_cantent {width: 2500px;height: 400px;position: absolute;left: 0px;animation-name: move;animation-duration: 10s;animation-iteration-count: infinite;}@keyframes move {0% {left: 0px;}25% {left: -500px;}50% {left: -1000px;}75% {left: -1500px;}100% {left: -2000px}}</style>
</head>
<body><div class="one"><div class="one_cantent"><img src="./image/0.jpg"><img src="./image/1.jpg"><img src="./image/2.jpg"><img src="./image/3.jpg"><img src="./image/4.jpg"></div></div>
</body>
</html>
3.渐变效果
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>轮播</title><style>*{margin: 0;padding: 0;
}
.one img{position: absolute;width: 400px;height:200px;
}
.two img{position: absolute;width: 400px;height: 200px;
}
.three img{position: absolute;width: 400px;height:200px;
}
.three {animation-name: cantoons;animation-duration: 10s;animation-iteration-count: infinite;
}
.two {animation-name: cantoons2;animation-duration: 10s;animation-iteration-count: infinite;
}
.one {animation-name: cantoons1;animation-duration: 10s;animation-iteration-count: infinite;
}
@keyframes cantoons{0% {opacity: 1;}35% {opacity: 0;}70% {opacity: 0;}100% {opacity: 1;}}
@keyframes cantoons2{0% {opacity: 0;}35% {opacity: 1;}70% {opacity: 0;}100% {opacity: 0;}
}
@keyframes cantoons1{0% {opacity: 0;}35% {opacity: 0;}70% {opacity: 1;}100% {opacity: 0;}
}</style></head>
<body><div class="one"><img src="./image/1.jpg" alt=""></div><div class="two"><img src="./image/2.jpg" alt=""> </div><div class="three"><img src="./image/3.jpg" alt=""> </div></body>
</html>源码连接提取码：uaix
更多推荐
只用css和html实现简单的图片轮播效果
发布评论