超简单的轮播图动画效果 HTML+Css

最新推荐文章于 2024-01-16 14:06:17 发布

小董大咖

最新推荐文章于 2024-01-16 14:06:17 发布

阅读量234

点赞数 1

文章标签： css html css3

本文链接：https://blog.csdn.net/ddf__/article/details/128998754

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style>
			.banner {
				width: 500px;
				height: 300px;
				overflow: hidden;
			}
 
			.box {
				width: 400%;
				height: 300px;
				animation: banner 5s infinite;
			}
 
			.box img {
				width: 25%;
				height: 300px;
				float: top;
			}
 
			@keyframes banner {
				0% {
					margin-left: 0px;
				}
 
				33.3% {
					margin-left: -100%;
				}
 
				66.6% {
					margin-left: -200%;
				}
 
				100% {
					margin-left: -300%;
				}
			}
		</style>
	</head>
	<body>
 
		<div class="banner">
			<div class="box">
				<img src="41c406dcb2f628db97bc64bf84c6e906_38bf42ad37a6eba0b927e10e8d544ac498e9c4c0.jpg" alt="">
				<img src="41c406dcb2f628db97bc64bf84c6e906_38bf42ad37a6eba0b927e10e8d544ac498e9c4c0.jpg" alt="">
				<img src="41c406dcb2f628db97bc64bf84c6e906_38bf42ad37a6eba0b927e10e8d544ac498e9c4c0.jpg" alt="">
 
				<img src="41c406dcb2f628db97bc64bf84c6e906_38bf42ad37a6eba0b927e10e8d544ac498e9c4c0.jpg" alt="">
			</div>
		</div>
<!-- 动画：
		animation: 名称 过渡时间 方式 次数 开始时间;
                   名称 	要和规则的名称一致
                   过渡时间   一次动画所用到的时间  s
				   方式   linear  平缓
						   ease   默认，慢 - 快 - 慢
				   次数 	数字 或 infinite无限的
				   开始时间   几秒后开始  s
					
				规则
					@keyframes 名称{
						from{ 开始时的样式 }
						to{ 结束时的样式 }
					}
					
					@keyframes box{
						0%{  }
						25%{  }
						50%{  }
						75%{  }
						100%{  }
					}
					
			 -->
	</body>
</html>