CSS文字渐变效果

原创已于 2025-06-27 14:06:23 修改 · 343 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #css3

于 2025-05-26 17:35:33 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS文字渐变效果</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}

.gradient-text {
font-size: 3rem;
font-weight: bold;
background: linear-gradient(90deg, #ff3366, #ff9933, #33cc33, #3399ff, #cc33ff);
background-size: 400% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: gradient 8s ease infinite;
}

@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}

.link {
position: absolute;
bottom: 20px;
color: #666;
text-decoration: none;
}

.link:hover {
color: #3399ff;
}
</style>
</head>
<body>
<div class="gradient-text">渐变文字效果</div>
</body>
</html>