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

bug丶小狼人

已于 2022-12-09 16:13:49 修改

阅读量2.7k

点赞数 2

文章标签： html css 前端

于 2022-12-09 16:05:21 首次发布

本文链接：https://blog.csdn.net/wangxuanyang_zer/article/details/128253523

版权

轮播图在电商方面应用的非常广泛，那么该如何去写呢？接下来我们就看一下制作轮播图（bannner）的详细方法。

所谓轮播图就是将n张图面进行一个移动切换;

废话不多说上代码

<!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>

css的轮播图动画呢是自动轮播他的原理也很简单他主要就是animation和keyframes ，transform:translate();的应用

bug丶小狼人

关注

2
点赞
踩
14

收藏

觉得还不错? 一键收藏
打赏
2
评论
超简单的轮播图动画效果 HTML+Css

css的轮播图动画呢是自动轮播他的原理也很简单他主要就是animation和keyframes ，transform:translate();轮播图在电商方面应用的非常广泛，那么该如何去写呢？接下来我们就看一下制作轮播图（bannner）的详细方法。所谓轮播图就是将n张图面进行一个移动切换;
复制链接

扫一扫