css3 横向走马灯

最新推荐文章于 2024-05-30 10:50:01 发布

沙鑫741

最新推荐文章于 2024-05-30 10:50:01 发布

阅读量6.5k

点赞数

文章标签：啊啊

本文链接：https://blog.csdn.net/weixin_38641550/article/details/80878312

版权

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta name="renderer" content="webkit" />
		<title>恭喜沙鑫捡钱</title>

		<style>
			.gundongBox {
				width: 300px;
				height: 30px;
				margin: 200px auto;
				position: relative;
				overflow: hidden;
				background: pink;
			}
			
			.gundongList {
				position: absolute;
				animation: geiwogun 12s linear infinite;
				white-space: nowrap;
			}
			
			.gundongList span {
				font-size: 20px;
				color: #000;
				padding: 5px 10px
			}
			
			@keyframes geiwogun {
				from {
					transform: translate(0, 0);
				}
				to {
					transform: translate(-50%, 0);
				}
			}
		</style>
	</head>

	<body>
		<div class="gundong">
			<div class="gundongBox">
				<div class="gundongList">
					<span>恭喜 沙鑫 捡到100块</span>
					<span>恭喜 沙鑫 又捡到100块</span>
					<span>恭喜 沙鑫 再捡到100块</span>
					<span>恭喜 沙鑫 还捡到100块</span>
					<span>恭喜 沙鑫 捡到100块</span>
					<span>恭喜 沙鑫 又捡到100块</span>
					<span>恭喜 沙鑫 再捡到100块</span>
					<span>恭喜 沙鑫 还捡到100块</span>
				</div>
			</div>
		</div>
	</body>
</html>

沙鑫741

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css3 横向走马灯

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no&qu
复制链接

扫一扫