跑马灯的写法

进击小白程序猿

已于 2023-03-22 17:17:54 修改

阅读量111

点赞数

文章标签： css html css3

于 2023-03-17 13:14:26 首次发布

本文链接：https://blog.csdn.net/qq_52753061/article/details/129618200

版权

关于跑马灯的写法

其实html和vue的写法差不多，直接上代码

<div class="slider">
		<ul>
			<li><img src="../../static/hzdw1.jpg" alt=""></li>
			<li><img src="../../static/diyi.jpg" alt=""></li>
			<li><img src="../../static/lyx.jpg" alt=""></li>
			<li><img src="../../static/ll.jpg" alt=""></li>

			<!-- 2 -->
			<li><img src="../../static/hzdw1.jpg" alt=""></li>
			<li><img src="../../static/diyi.jpg" alt=""></li>
			<li><img src="../../static/lyx.jpg" alt=""></li>
			<li><img src="../../static/ll.jpg" alt=""></li>
			<!-- 3 -->
			<li><img src="../../static/hzdw1.jpg" alt=""></li>
			<li><img src="../../static/diyi.jpg" alt=""></li>
			<li><img src="../../static/lyx.jpg" alt=""></li>
			<li><img src="../../static/ll.jpg" alt=""></li>
			<!-- 4 -->
			<li><img src="../../static/hzdw1.jpg" alt=""></li>
			<li><img src="../../static/diyi.jpg" alt=""></li>
			<li><img src="../../static/lyx.jpg" alt=""></li>
			<li><img src="../../static/ll.jpg" alt=""></li>
			<!-- 5 -->
			<li><img src="../../static/hzdw1.jpg" alt=""></li>
			<li><img src="../../static/diyi.jpg" alt=""></li>
			<li><img src="../../static/lyx.jpg" alt=""></li>
			<li><img src="../../static/ll.jpg" alt=""></li>
			<!-- 6 -->
			<li><img src="../../static/hzdw1.jpg" alt=""></li>
			<li><img src="../../static/diyi.jpg" alt=""></li>
			<li><img src="../../static/lyx.jpg" alt=""></li>
			<li><img src="../../static/ll.jpg" alt=""></li>

			<li><img src="../../static/hzdw1.jpg" alt=""></li>
			<li><img src="../../static/diyi.jpg" alt=""></li>
			<li><img src="../../static/lyx.jpg" alt=""></li>
			<li><img src="../../static/ll.jpg" alt=""></li>

			<li><img src="../../static/hzdw1.jpg" alt=""></li>
		</ul>
	</div>
````CSS样式
.slider {
			width: 100%;
			margin: 0 auto;
			overflow: hidden;
			margin-top: 1px;
		}

		.slider ul {
			width: 2900px;
			animation: move 3s infinite;
		}

		.slider li {
			float: left;
			width: 100px;
			height: 100px;
			margin-top: 10px;
		}

		.slider ul li img {
			width: 100%;
			height: 100px;
		}

		.slider ul:hover {
			animation-play-state: paused;
		}