只用css实现图片自动轮播效果

最新推荐文章于 2024-06-26 11:48:50 发布

雾失楼台，

最新推荐文章于 2024-06-26 11:48:50 发布

阅读量1w

点赞数 24

文章标签： css图片轮播

本文链接：https://blog.csdn.net/weixin_43416686/article/details/90732942

版权

css实现图片自动轮播

只用css实现图片轮播效果

代码

// An highlighted block
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			img{
				position: absolute;          /*让所有图片显示在一个位置，设置绝对位置*/
				opacity: 0;
				animation: Aimg 12s infinite;      /*设置图片轮播一次时间，以及轮播方式（无限循环）*/
			}
			@keyframes Aimg{
				0% {                  /*在百分之零时图片完全不可见*/
					opacity: 0;
				}
				
				1% {
					opacity: 0.3;
				}
				2% {
					opacity: 0.5;
				}
				3% {
					opacity: 0.8;
				}
				4% {                 /*设置这些尽量让图片切换时更加流畅，不突兀*/
					opacity: 1;
				}
				24% {
					opacity: 1;
				}
				
				25% {               /*在此时本张图片显示结束，不透明度设置为0*/
					opacity: 0;
				}
			}
			img:nth-child(0){animation-delay: 0s;}/*设置下一个子元素延迟时间*/
			img:nth-child(1){animation-delay: 3s;}
			img:nth-child(2){animation-delay: 6s;}
			img:nth-child(3){animation-delay: 9s;}
		</style>
	</head>
	<body>
		<div>
			<img src="img/11.jpg"  />
			<img src="img/3.jpg"  />
			<img src="img/324347.jpg" />
			<img src="img/4.jpg" />
		</div>
	</body>
</html>

雾失楼台，

关注

24
点赞
踩
88

收藏

觉得还不错? 一键收藏
1
评论
只用css实现图片自动轮播效果

css实现图片轮播只用css实现图片轮播效果代码// An highlighted block<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> img{ position:...
复制链接

扫一扫