一个炫彩动态的渐变文字特效，文本的颜色会随着动画的变化而呈现出一个从左到右的渐变效果。以下是代码的详细说明：
- 页面布局：
- 使用
flex布局使内容在页面中水平和垂直居中。 - 设置页面背景颜色为黑色，以确保文字效果更加明显。
- 文本样式：
- 设置文本字体大小为 6rem，并使其加粗。
- 使用线性渐变背景色，颜色从
#ff9a9e到#fad0c4再到#a1c4fd和#c2e9fb，最后回到#ff9a9e，形成一个完整的颜色循环。 - 设置背景大小为
400% 400%，以便在动画过程中有足够的空间来移动渐变色带。 - 使用
-webkit-background-clip: text将背景剪裁为文本形状，使得背景渐变只应用在文本上。 - 设置文本填充颜色为透明，以便显示背景渐变。
- 动画效果：
- 定义了一个名为
gradientAnimation的关键帧动画。 - 动画持续时间为 10 秒，使用
ease缓动函数，无限循环播放。 - 在动画的不同阶段（0%, 50%, 100%），调整背景位置，使渐变色带从左到右移动，再返回起点，从而产生动态效果。
通过这些设置，最终可以在页面上展示一个动态变化、色彩丰富的渐变文字效果。你可以根据需要调整颜色、字体大小、动画速度等参数，以达到不同的视觉效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #000;
margin: 0;
}
.gradient-text {
font-size: 6rem;
font-weight: bold;
background: linear-gradient(45deg, #ff9a9e, #fad0c4, #a1c4fd, #c2e9fb, #a1c4fd, #fad0c4, #ff9a9e);
background-size: 400% 400%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: gradientAnimation 10s ease infinite;
}
@keyframes gradientAnimation {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
</style>
</head>
<body>
<div class="gradient-text">网页特效库</div>
</body>
</html>
No responses yet