html+css3跑马灯(抖音我们的照片记录幸福到永远)

本文链接：https://blog.youkuaiyun.com/Infatuatedmonkey/article/details/124420548

该博客介绍了如何利用CSS3的动画属性制作一个水平滚动的图片展示，每个图片轮播组由多个图片组成，通过设置不同的动画实现平滑过渡。同时，针对谷歌浏览器对audio autoplay属性的限制，给出了点击播放音频的解决方案。博客内容包括HTML结构和CSS样式代码，适合前端开发者学习实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1，效果图
在这里插入图片描述
2，介绍
主要通过css3动画属性实现，中间这个人物是通过窗口定位固定在哪里的。
由于谷歌浏览器为优化用户体验禁止audio中的autoplay属性，所以下面直接加了一个audio，点击即可播放。

3,html部分(这里可以更改为自己喜欢的图片)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>我们的照片记录幸福到永远</title>
	
	</head>
	<body>
		<div class="box">
			<div class="play1">
				<ul>
					<li><img src="img/banner1.jpg" alt=""></li>
					<li><img src="img/banner2.jpg" alt=""></li>
					<li><img src="img/banner3.jpg" alt=""></li>
					<li><img src="img/banner4.jpg" alt=""></li>
					<li><img src="img/banner5.jpg" alt=""></li>
					<li><img src="img/banner6.jpg" alt=""></li>
					<li><img src="img/banner7.jpg" alt=""></li>
					<li><img src="img/banner8.jpg" alt=""></li>
					<li><img src="img/banner9.jpg" alt=""></li>
					<li><img src="img/banner10.jpg" alt=""></li>
					<li><img src="img/banner1.jpg" alt=""></li>
					<li><img src="img/banner2.jpg" alt=""></li>
					<li><img src="img/banner3.jpg" alt=""></li>
					<li><img src="img/banner4.jpg" alt=""></li>
				</ul>
			</div>
			<div class="play2">
				<ul>
					<li><img src="img/banner17.jpg" alt=""></li>
					<li><img src="img/banner18.jpg" alt=""></li>
					<li><img src="img/banner19.jpg" alt=""></li>
					<li><img src="img/banner20.jpg" alt=""></li>
					<li><img src="img/banner11.jpg" alt=""></li>
					<li><img src="img/banner12.jpg" alt=""></li>
					<li><img src="img/banner13.jpg" alt=""></li>
					<li><img src="img/banner14.jpg" alt=""></li>
					<li><img src="img/banner15.jpg" alt=""></li>
					<li><img src="img/banner16.jpg" alt=""></li>
					<li><img src="img/banner17.jpg" alt=""></li>
					<li><img src="img/banner18.jpg" alt=""></li>
					<li><img src="img/banner19.jpg" alt=""></li>
					<li><img src="img/banner20.jpg" alt=""></li>
				</ul>
			</div>
			<div class="play3">
				<ul>
					<li><img src="img/banner21.jpg" alt=""></li>
					<li><img src="img/banner22.jpg" alt=""></li>
					<li><img src="img/banner23.jpg" alt=""></li>
					<li><img src="img/banner24.jpg" alt=""></li>
					<li><img src="img/banner25.jpg" alt=""></li>
					<li><img src="img/banner26.jpg" alt=""></li>
					<li><img src="img/banner27.jpg" alt=""></li>
					<li><img src="img/banner28.jpg" alt=""></li>
					<li><img src="img/banner29.jpg" alt=""></li>
					<li><img src="img/banner30.jpg" alt=""></li>
					<li><img src="img/banner21.jpg" alt=""></li>
					<li><img src="img/banner22.jpg" alt=""></li>
					<li><img src="img/banner23.jpg" alt=""></li>
					<li><img src="img/banner24.jpg" alt=""></li>
				</ul>
			</div>
		</div>
		<img src="img/hero2.png" class="hero"  alt="">
		<audio src="audio/zaijian.mp3" autoplay="autoplay" loop="loop" controls="con">
			当前浏览器不支持audio
		</audio>
	</body>
</html>

4，css部分

	<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			ul{
				display: flex;
			}
			li {
				width: 400px;
				height: 200px;
				list-style: none;
				flex-shrink: 0;
				padding: 0 5px;
				box-sizing: border-box;
			}
			img {
				width: 100%;
				height: 100%;
				object-fit: cover;

			}
			.box{
				width: 100%;
				height: 728px;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				overflow: hidden;
			}
			.box div{
				width: 100%;
				height: 200px;
			}
			.play1{
				animation: action1 40s infinite linear;
			}
			.play2{
				transform: translateX(-4000px);
				animation: action2 40s infinite linear;
			}
			.play3{
				animation: action1 40s infinite linear;
			}
			@keyframes action1{
				to{
					transform: translateX(-4000px);
				}
			}
			@keyframes action2{
				to{
					transform: translateX(0px);
				}
			}
			.hero{
				position: fixed;
				bottom: 0;
				left: 50%;
				margin-left: -500px;
				width: 800px;
				height: 600px;
			}
		</style>

记录每一个前端小案例！