【前端学习笔记 CSS系列十九】无缝滚动

最新推荐文章于 2024-04-23 16:26:38 发布

GUANYX~

最新推荐文章于 2024-04-23 16:26:38 发布

阅读量124

点赞数

分类专栏：前端学习笔记文章标签：前端 css css3

本文链接：https://blog.csdn.net/gyx1549624673/article/details/122944447

版权

前端学习笔记专栏收录该内容

56 篇文章 0 订阅

订阅专栏

一、效果

在这里插入图片描述

二、代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			nav {
				width: 1000px;
				height: 135px;
				border: 1px solid pink;
				margin: 10px auto;
				overflow: hidden;
			}
			ul li {
				list-style: none;
				float: left;
			}
			li img {
				width: 200px;
			}
			nav ul {
				width: 200%;
				animation: moving 5s  linear infinite;
			}
			@keyframes moving{
				from{
					transform: translateX(0) ;
				}
				to{
					transform: translateX(-1000px);
				}
			}
			nav:hover ul {
				/* 鼠标划上去的时候动画暂停 */
				animation-play-state: paused;
			}
		</style>
	</head>
	<body>
		<nav>
			<ul>
				<li><img src="img/nav1.jpg" ></li>
				<li><img src="img/nav2.jpg" ></li>
				<li><img src="img/nav3.jpg" ></li>
				<li><img src="img/nav4.jpg" ></li>
				<li><img src="img/nav5.jpg" ></li>
				<!-- 制造无缝衔接假象 -->
				<li><img src="img/nav1.jpg" ></li>
				<li><img src="img/nav2.jpg" ></li>
				<li><img src="img/nav3.jpg" ></li>
				<li><img src="img/nav4.jpg" ></li>
				<li><img src="img/nav5.jpg" ></li>
			</ul>
		</nav>
	</body>
</html>

GUANYX~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【前端学习笔记 CSS系列十九】无缝滚动

一、效果二、代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> * { padding: 0; margin: 0; } nav { width: 1000px; height: 135px; border: 1px solid pink;
复制链接

扫一扫