该文本展示了一个使用HTML和CSS创建的动态渐变背景效果。通过CSS的背景剪裁和线性渐变，标题文字呈现出渐变动画，背景色为浅灰色，整个页面居中显示。使用了@keyframes定义动画，使背景在不同颜色之间平滑过渡，增强视觉效果。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态渐变背景</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
h1 {
font-size: 5rem;
color: transparent;
-webkit-background-clip: text; /* Edge, Chrome */
background-clip: text; /* Safari, FF */
background-image: linear-gradient(45deg, #ffb3ba, #c49c6e, #bfbf76, #77b084, #ff7e74, #3b82f6, #c084fc, #db2777);
background-size: 300% 100%;
animation: gradientAnimation 8s linear infinite;
animation-direction: alternate;
}
@keyframes gradientAnimation {
0% {
background-position: 0;
}
100% {
background-position: 100%;
}
}
</style>
</head>
<body>
<h1>动起来的渐变背景</h1>
</body>
</html>