浅谈纯CSS实现轮播

最新推荐文章于 2023-11-04 12:29:48 发布

筱葭

最新推荐文章于 2023-11-04 12:29:48 发布

阅读量1.3k

点赞数 1

分类专栏： CSS 文章标签： CSS 轮播

本文链接：https://blog.csdn.net/zhouziyu2011/article/details/53870881

版权

本文通过HTML和CSS展示了如何不依赖JavaScript实现一个简单的图片轮播效果。利用CSS的`@keyframes`动画和相对定位，实现了图片的平滑切换，并通过不同颜色的指示点显示当前展示的图片位置。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<style type="text/css">
			.box{
				position:absolute;
				width:20px;
				height:20px;
				background:grey;
				color:white;
				text-align:center;
				font-family:Microsoft Yahei;
			}
			#move1{
				bottom:0;
				left:240px;
				animation:change1 10s ease-out infinite;
			}
			#move2{
				bottom:0;
				left:260px;
				animation:change2 10s ease-out infinite;
			}
			#move3{
				bottom:0;
				left:280px;
				animation:change3 10s ease-out infinite;
			}
			#frame{
				position:absolute;
				width:300px;
				height:200px;
				overflow:hidden;
			}
			#photos img{
				float:left;
				width:300px;
				height:200px;
			}
			#photos{
				position:relative;
				width:900px; 
				animation:actions 10s ease-out infinite;
			}
			@keyframes actions{
				0%,30%{margin-left:0px;}
				35%,65%{margin-left:-300px;}
				70%,100%{margin-left:-600px;}
			}
			@keyframes change1{
				0%,30%{b