纯CSS实现简易轮播（一）

最新推荐文章于 2025-03-06 10:59:33 发布

原创最新推荐文章于 2025-03-06 10:59:33 发布 · 2.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#animation #keyframes

css 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用纯CSS制作一个简单的轮播图效果。通过设置动画和层级，实现了图片的自动切换，并提供了HTML和CSS代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

做项目的时候总用别人的轮播插件，就想着自己能不能做一个轮播，能不能用纯CSS做的，然后就在网上查了一下，发现例子还不少，然后看一下别人的，自己照猫画虎的也来一个试试，很简单的一个效果，这个的体验效果不太好，想学习的可以看一下试试

html代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../css/test_5.css">
</head>
<body>
<div id="carousel">
	<ul class="slider">
		<li class="items item_1"><img src="../img/img_14.jpg"><h1>1</h1></li>
		<li class="items item_2"><img src="../img/img_15.jpg"><h1>2</h1></li>
		<li class="items item_3"><img src="../img/img_16.jpg"><h1>3</h1></li>
		<li class="items item_4"><img src="../img/img_17.jpg"><h1>4</h1></li>
		<li class="items item_5"><img src="../img/img_18.jpg"><h1>5</h1></li>
	</ul>
</div>

</body>
</html>

CSS代码如下：

*{
    margin:0;
    padding:0;
}
ul,li{
    list-style: none;
}
#carousel{
	width: 600px;
	height: 400px;
	background-color: rgba(255,63,63,.3);
	margin: 20px auto;
}
#carousel .slider{
	padding: 0;
	margin: 0;
	position: relative;
}
#carousel .items{
	width: 100%;
	position: absolute;
	animation: carousel 20s linear infinite;
	
	/* animation: name duration timing-function delay iteration-count direction;
	animation: 绑定到选择器的keyframe名称 花费时长 速度曲线 延迟 播放次数 是否反向播放动画; */
}
#carousel .items+.items:hover{
	animation-play-state: paused;
	-webkit-animation-play-state: paused; /* Safari 和 Chrome */
}
#carousel .items img{
	width: 100%;
	height: 100%;
}
#carousel .item_1{
	animation-delay: -1s;
	z-index: -1;
}
#carousel .item_2{
	animation-delay: 3s;
	z-index: -1;
}
#carousel .item_3{
	animation-delay: 7s;
	z-index: -1;
}
#carousel .item_4{
	animation-delay: 11s;
	z-index: -1;
}
#carousel .item_5{
	animation-delay: 15s;
	z-index: -1;
}
#carousel h1{
	position: absolute;
	top: 50px;
	left: 200px;
	background-color: #FF3F3F;
	width: 100px;
	height: 100px;
	line-height: 100px;
	border-radius: 100%;
	font-size: 40px;
	color: #fff;
	text-align: center;
}
@keyframes carousel{
    0%{
        opacity:0;
        z-index:2;
    }
    5%{
        opacity:1;
        z-index: 1;
    }
    20%{
        opacity:1;
        z-index:1;
    }
    25%{
        opacity:0;
        z-index:0;
    }
    100%{
        opacity:0;
        z-index:-1;
    }
}

/*
css实现暂停
animation-play-state:paused;
-webkit-animation-play-state:paused; /* Safari 和 Chrome */
*/

效果图如下：