CSS 文本滚动

原创
2021/04/20 17:30
阅读数 106
.cssmarquee {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.cssmarquee .wrapper {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	animation: cssmarqueeWrapper 3s linear infinite;
}
.cssmarquee .marqueeWords {
	position: absolute;
	height: 100%;
	left: 0;
	top: 0;
	font-weight: bold;
	color: #fff;
	margin: 0;
	text-align: left;
	white-space: nowrap; /* no wrap */
	transform: translateX(0);
    display: flex;
	align-items: center;
	animation: cssmarquee 3s linear infinite;
}

@keyframes cssmarqueeWrapper {
	0% {
		transform: translateX(100%); /* parent 100% */
	}
	100% {
		transform: translateX(0);
	}
}
@keyframes cssmarquee {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-100%); /* words -100% */
	}
}
<div class="cssmarquee">
	<div class="wrapper">
		<p class="marqueeWords">滚动提示</p>
	</div>
</div>

 

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部