css 彩虹色发光字体
时间: 2024-01-23 13:15:34 浏览: 112
以下是使用CSS实现彩虹色发光字体的方法:
```css
@keyframes shining {
0% {
text-shadow: 0 0 10px red;
}
14% {
text-shadow: 0 0 10px orange;
}
28% {
text-shadow: 0 0 10px yellow;
}
42% {
text-shadow: 0 0 10px green;
}
57% {
text-shadow: 0 0 10px blue;
}
71% {
text-shadow: 0 0 10px indigo;
}
85% {
text-shadow: 0 0 10px violet;
}
100% {
text-shadow: 0 0 10px red;
}
}
.rainbow-text {
font-size: 24px;
font-family: Arial, sans-serif;
background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: shining 3s linear infinite;
}
```
在HTML中使用上述CSS类名即可实现彩虹色发光字体效果:
```html
<p class="rainbow-text">Hello, World!</p>
```
阅读全文