css3实现轮播图-CSS3实现简单的无缝轮播效果

bendan520 2023年8月26日 css3 0

CSS实现简单的无缝轮播效果

    由于还没有接触到JS实现动态效果，但是比较想实现页面的简单轮播效果，翻了翻CSS标签，
发现只有CSS3也可以实现动画效果，即通过animation动画标签，来实现动态的页面效果。

css3实现轮播图_轮播图css代码_轮播图css3样式

以下是 HTML 模块


<html>
	<head>
		<meta charset="utf-8">
		<title>动画轮播</title>
		<link rel="stylesheet" type="text/css" href="../css/day12-2.css" />
	</head>
	<body>
		<div class="container">
			<div class="photo">
				<img src="../images/img12-2-1.jpg" />
				<img src="../images/img12-2-2.jpg" />
				<img src="../images/img12-2-3.jpg" />
				<img src="../images/img12-2-1.jpg" />
				
			</div>
		</div>
	</body>
</html>

轮播图css3样式_轮播图css代码_css3实现轮播图

以下是CSS模块

*
{
	margin: 0px;
	padding: 0px;
}
.container
{
	width: 533px;
	height: 300px;
	background: #00FFFF;
	overflow:hidden;
}
/* 起到一个相框的作用,隐藏图片 */
.photo
{
	width: 9999px;
	animation: switch 5s ease-out infinite;
}
/* 循环播放的容器的大小，要能装的下所有的图片 不然会间断显示  为图片按滑动主体*/
.container img
{
	display: block;
	float: left;
}
/* 调整图片位置,实现从左至右滑动 */
@keyframes switch{
	0%
	{
		transform:translatex(0%);
	}
	20%
	{
		transform:translatex(0%);
	}
	25%
	{
		transform:translatex(-533px);
	}
	45%
	{
		transform:translatex(-533px);
	}
	50%
	{
		transform:translatex(-1066px);
	}
	70%
	{
		transform:translatex(-1066px);
	}
	100%
	{
		transform:translatex(-1599px);
	}
}
/* 其实现的是动态移动 */

实现效果图：

css3实现轮播图_轮播图css3样式_轮播图css代码

其中，将第一张图片添加为最后一张非常重要。 如果没有的话css3实现轮播图css3实现轮播图，会在下一个周期出现

闪烁的情况。

轮播图css代码_css3实现轮播图_轮播图css3样式

虽然css也可以实现轮播效果，但是相对于js实现来说，功能性就弱很多了。

无法控制暂停和播放、无法与用户交互、无法窃听状态变化等，

但用处也是显而易见的！ 那是。 。 .足够简单