当前位置： 移动技术网 > IT编程>网页制作>HTML > 纯Css设置无缝轮播图

纯Css设置无缝轮播图

2020年07月17日  | 移动技术网IT编程  | 我要评论
代码如下:

使用css实现简单的无缝滑动轮播图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS轮播图</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			ul {
				list-style: none;
			}

			.wrap {
				width: 100%;
				overflow: hidden;
			}

			.rotation {
				width: 100%;
				/* 设置永不换行 */
				white-space: nowrap;
				/* 去除行级子元素之间的空白 */
				font-size: 0;
				animation: ani 10.5s infinite;
			}

			.rotation>li {
				width: 100%;
				display: inline-block;

			}

			.rotation>li>img {
				width: 100%;
			}

			@keyframes ani {
				0% {
					transform: translateX(0);
				}

				28% {
					transform: translateX(0);
				}

				33% {
					transform: translateX(-100%);
				}

				61% {
					transform: translateX(-100%);
				}

				66% {
					transform: translateX(-200%);
				}

				94% {
					transform: translateX(-200%);
				}

				100% {
					transform: translateX(-300%);
				}
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<ul class="rotation">
				<li>
					<img src="自己的图片1" alt="">
				</li>
				<li>
					<img src="自己的图片2" alt="">
				</li>
				<li>
					<img src="自己的图片3" alt="">
				</li>
				<li>
					<img src="自己的图片1(和第一个一样为了实现无缝滑动)" alt="">
				</li>
			</ul>
		</div>
	</body>
</html>

本文地址：https://blog.csdn.net/qq_41039734/article/details/107388051

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网