前端实战案例⑩CSS动画实现轮播图

最新推荐文章于 2024-07-18 15:48:23 发布

耀南.

最新推荐文章于 2024-07-18 15:48:23 发布

阅读量1.7k

点赞数

分类专栏：前端好玩炫酷的动画小案例文章标签：前端 css

本文链接：https://blog.csdn.net/YN2000609/article/details/133621687

版权

前端好玩炫酷的动画小案例专栏收录该内容

68 篇文章 9 订阅

订阅专栏

更多前端简单小组件尽在主页！喜欢可以收藏哦！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS动画实现轮播图</title>
		<style>
			/* 初始化样式 */
			*{
				margin: 0;
				padding: 0;
			}
			/* 设置宽高，使用定位+transform进行水平垂直居中 */
			#banner{
				width: 520px;
				height: 280px;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				overflow: hidden;
			}
			/* 设置navigation的宽高并使用 display: flex;
				justify-content: space-around;
				align-items: center;
				进行对内容的居中
			*/
			.navigation{
				width: 72px;
				height: 13px;
				background-color: rgba(255,255,255,0.3);
				position: absolute;
				left: 50%;
				bottom: 15px;
				transform: translateX(-50%);
				border-radius: 7px;
				display: flex;
				justify-content: space-around;
				align-items: center;
			}
			/* 设置label的宽高，label必须设置为块级元素才能设置宽高
				并将label设置为一个背景色为白色的小圆
			 */
			.navigation label{
				display: inline-block;
				width: 8px;
				height: 8px;
				background-color: #FFFFFF;
				border-radius: 50%;
			}
			/* 设置label鼠标移入：背景色变化为#FF5000 */
			.navigation label:hover{
				background-color: #FF5000;
			}
			/* 将input单选框隐藏，使用绝对定位是使input占用的空间释放出来 */
			.sliders input[name='r']{
				position: absolute;
				visibility: hidden;
			}
			/* 设置sliders宽度为500%，flex为一行显示 */
			.sliders{
				width: 500%;
				height: 100%;
				display: flex;
			}
			/* 设置slider的宽为20%，这个20%为父元素的20%，
			   即500%的20%->100%也就是一张图片的宽度*/
			.slider{
				width: 20%;
				transition: 0.6s;
			}
			/* 设置图片的宽高 */
			.slider img{
				width: 100%;
				height: 100%;
			}
			/* 设置单选框被选中时，s1向左移动，因为5张图片为一行，
			s1在最前，所以整个图片一起向左移动，实现轮播效果 */
			#r1:checked ~ .s1{
				margin-left: 0;
			}
			#r2:checked ~ .s1{
				margin-left: -20%;
			}
			#r3:checked ~ .s1{
				margin-left: -40%;
			}
			#r4:checked ~ .s1{
				margin-left: -60%;
			}
			#r5:checked ~ .s1{
				margin-left: -80%;
			}
		</style>
	</head>
	<body>
		<div id="banner">
			<div class="sliders">
				<!-- 该单选框用于和label绑定，当点击label时，轮播图发生平移 -->
				<input type="radio" name="r" id="r1" checked="checked">
				<input type="radio" name="r" id="r2">
				<input type="radio" name="r" id="r3">
				<input type="radio" name="r" id="r4">
				<input type="radio" name="r" id="r5">
				<div class="slider s1">
					<img src="./imgs/slider01.jpg" alt="">
				</div>
				<div class="slider">
					<img src="./imgs/slider02.jpg" alt="">
				</div>
				<div class="slider">
					<img src="./imgs/slider03.jpg" alt="">
				</div>
				<div class="slider">
					<img src="./imgs/slider04.jpg" alt="">
				</div>
				<div class="slider">
					<img src="./imgs/slider05.jpg" alt="">
				</div>
			</div>
			<!-- 该单选框用于和label绑定，当点击label时，轮播图发生平移 -->
			<div class="navigation">
				<label for="r1"></label>
				<label for="r2"></label>
				<label for="r3"></label>
				<label for="r4"></label>
				<label for="r5"></label>
			</div>
		</div>
	</body>
</html>

更多前端简单小组件尽在主页！喜欢可以收藏哦！