彩虹色文本描边动画

原创已于 2025-06-27 15:44:23 修改 · 325 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-04-23 13:44:37 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>彩虹色文本描边动画</title>
<style>
body {
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
overflow: hidden;
font-family: 'Arial', sans-serif;
}

.rainbow-text {
font-size: 5rem;
font-weight: bold;
text-align: center;
position: relative;
color: transparent;
-webkit-text-stroke: 2px #fff;
animation: rainbowStroke 8s linear infinite;
}

@keyframes rainbowStroke {
0%, 100% {
-webkit-text-stroke-color: #ff0000;
text-shadow: 0 0 10px #ff0000;
}
16% {
-webkit-text-stroke-color: #ff7f00;
text-shadow: 0 0 10px #ff7f00;
}
32% {
-webkit-text-stroke-color: #ffff00;
text-shadow: 0 0 10px #ffff00;
}
48% {
-webkit-text-stroke-color: #00ff00;
text-shadow: 0 0 10px #00ff00;
}
64% {
-webkit-text-stroke-color: #0000ff;
text-shadow: 0 0 10px #0000ff;
}
80% {
-webkit-text-stroke-color: #4b0082;
text-shadow: 0 0 10px #4b0082;
}
}

.footer {
position: absolute;
bottom: 20px;
color: #fff;
font-size: 12px;
text-align: center;
width: 100%;
}

.footer a {
color: #fff;
text-decoration: none;
animation: linkGlow 3s ease-in-out infinite alternate;
}

@keyframes linkGlow {
from {
text-shadow: 0 0 5px #fff;
}
to {
text-shadow: 0 0 10px #fff, 0 0 20px #00f, 0 0 30px #00f;
}
}
</style>
</head>
<body>
<div class="rainbow-text">彩虹描边特效</div>

<div class="footer">

</div>