HTML+CSS 文本跑马灯特效

特效预览
在现代网页设计中，如何吸引用户的注意力并增强用户体验是至关重要的。今天，我将向大家介绍一种引人注目的文本跑马灯特效，让你的网页焕发新的活力！让我们来看看这个特效的预览效果。当你将以下代码应用到你的网页中时，会出现一组文字以跑马灯的方式动态显示，同时文字颜色也会随着动画的进行而变化，如图所示：

实现原理

这个特效的实现主要依赖于HTML、CSS和少量的动画关键帧。让我们一起来看看代码的具体实现：

HTML:


<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>文本跑马灯特效</title>
</head>

<body>
	<div class="text-wrapper">
		<span>W</span>
		<span>e</span>
		<span>b</span>
		<span>工</span>
		<span>坊</span>
		<span>宝</span>
		<span>典</span>
	</div>
</body>

</html>

CSS样式:

<style>
	body {
		padding: 200px;
		background-color: #000;
	}

	.text-wrapper>span {
		font-size: 6em;
		font-weight: bold;
		color: #faebd7;
		padding: 0 1rem;
		animation: textColorChange 2s infinite alternate;
	}

	@keyframes textColorChange {
		0% {
			color: #faebd7;
		}

		50% {
			color: #ff4500;
		}

		100% {
			color: #faebd7;
		}
	}

	.text-wrapper>span:nth-child(1) {
		animation-delay: 0s;
	}

	.text-wrapper>span:nth-child(2) {
		animation-delay: 0.2s;
	}

	.text-wrapper>span:nth-child(3) {
		animation-delay: 0.4s;
	}

	.text-wrapper>span:nth-child(4) {
		animation-delay: 0.6s;
	}

	.text-wrapper>span:nth-child(5) {
		animation-delay: 0.8s;
	}

	.text-wrapper>span:nth-child(6) {
		animation-delay: 1s;
	}

	.text-wrapper>span:nth-child(7) {
		animation-delay: 1.2s;
	}
</style>

HTML+CSS 文本跑马灯特效

猜你喜欢