纯css3animation写一个轮播图

最新推荐文章于 2023-04-06 20:31:33 发布

xiaopang_ty

最新推荐文章于 2023-04-06 20:31:33 发布

阅读量700

点赞数 3

分类专栏：使用animation写的纯动画效果文章标签：纯css轮播图

本文链接：https://blog.csdn.net/huashenty/article/details/103187940

版权

使用animation写的纯动画效果专栏收录该内容

1 篇文章 0 订阅

订阅专栏

纯css动画写一个轮播图

直接上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css动画写轮播图</title>
		<style>
			ul,li{
				list-style: none;
			}
			.box{
				width: 440px;
				height: 220px;
				float: left;
				position: relative;
				overflow: hidden;
			}
			.box1{
				width: 440px;
				height: 220px;
				position: absolute;
				animation: cda 20s ;
				animation-iteration-count: infinite;/*动画无限次播放*/
				animation-timing-function:linear;/*动画速度相同*/
			}
			@keyframes cda{
				0%{left:0px;}
				19.5%{left:0px;}
				20%{left: -440px;}
				39.5%{left: -440px;}
				40%{left: -880px;}
				59.5%{left: -880px;}
				60%{left: -1320px;}
				79.5%{left: -1320px;}
				80%{left: -1760px;}
				99.5%{left: -1760px;}
				100%{left: 0px;}
			}
			.box img{
				width: 440px;
				height: 220px;
				position: relative;
			}
			.box img:nth-child(7){
				position: absolute;
				top: 0px;
				left: 440px;
			}
			.box img:nth-child(8){
				position: absolute;
				top: 0px;
				left: 880px;
			}
			.box img:nth-child(9){
				position: absolute;
				top: 0px;
				left: 1320px;
			}
			.box img:nth-child(10){
				position: absolute;
				top: 0px;
				left: 1760px;
			}
			.dot{
				width:170px;
				height: 18px;
				position: absolute;
				bottom:30px;
				right: 160px;
			}
			.dot li{
				width: 18px;
				height: 18px;
				float: left;
				background:url(images/icons.png);/*本地文件，自行修改*/
				background-position: -855px -790px;
				border-radius: 50%;
				margin-left: 8px;
			}
			.dot li:hover{
				background:url(images/icons.png);/*本地文件，自行修改*/
				background-position: -919px -790px;
			}
			.box1 span{
				display: block;
				width: 18px;
				height: 18px;
				background:url(images/icons.png);/*本地文件，自行修改*/
				background-position: -855px -727px;
				position: absolute;
				bottom: 14px;
				border-radius: 50%;
				z-index: 9;
			}
			.box1 span:nth-child(1){
				right: 263px;
			}
			.box1 span:nth-child(2){
				right: -201px;
			}
			.box1 span:nth-child(3){
				right:-667px;
			}
			.box1 span:nth-child(4){
				right:-1137px;
			}
			.box1 span:nth-child(5){
				right:-1601px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="box1">
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<img src="https://dwz.cn/sUtCMJQ1">
				<img src="https://dwz.cn/nHUED9QQ">
				<img src="https://dwz.cn/Xn4PsM8o">
				<img src="https://dwz.cn/gD0KCPfj">
				<img src="https://dwz.cn/avDOtr3h">
			</div>
			<div class="dot">
				<ul>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>
		</div>
	</body>
</html>

效果图如下：
在这里插入图片描述
图片中间的小图标我是用了B站的图标，可以自行修改。

xiaopang_ty

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
纯css3animation写一个轮播图

纯css动画写一个轮播图直接上代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>css动画写轮播图</title> <style> ul,li{ list-style: none; } .box{...
复制链接

扫一扫