用HTML+CSS 动画实轮播图动画效果

最新推荐文章于 2024-01-16 14:06:17 发布

「已注销」

最新推荐文章于 2024-01-16 14:06:17 发布

阅读量595

点赞数

分类专栏： HTML+CSS 文章标签： html css 动画

本文链接：https://blog.csdn.net/qq_58558264/article/details/127188782

版权

HTML+CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图</title>
		<style>
			#container {
				width: 800px;
				height: 600px;
				overflow: hidden;
				border: 1px solid green;
				margin: 0px auto
			}

			#photo {
				width: 2400px;
				animation: switch 5s ease-out infinite;
				display: inline-block;
			}

			#photo>img {
				float: left;
				width: 800px;
				height: 600px;
			}

			@keyframes switch {

				0%,
				25% {
					margin-left: 0;
				}

				35%,
				60% {
					margin-left: -800px;
				}

				70%,
				100% {
					margin-left: -1600px;
				}

			}
		</style>
	</head>
	<body>
		<div id="container">
			<div id="photo">
				<img src="./画板 1-100.jpg" />
				<img src="./画板 2-100.jpg" />
				<img src="./画板 3 (2).png" />
			</div>
		</div>
	</body>

</html>

这个轮播图效果的原理是：有一个最大的容器，容器里面有一个div1，这个div1里面有三个大小相等的图片。每隔5秒内，每个图片的margin-left（外边距）减少（增加）原来图片宽度的一倍。

「已注销」

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
用HTML+CSS 动画实轮播图动画效果

这个轮播图效果的原理是：有一个最大的容器，容器里面有一个div1，这个div1里面有三个大小相等的图片。每隔5秒内，每个图片的margin-left（外边距）减少（增加）原来图片宽度的一倍。
复制链接

扫一扫