如何用CSS实现彩虹变色字体（Rainbow Text）

预览图：

html引用方法↓

<span class="rainbow">rainbowText丨www.417.red</span><br>

<style>
.rainbow{   
    font-size:50px;
    background-clip: border-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #FF512F;
    font-weight: 700;
    text-shadow: 0px 0px 7px #ffd800;
    background-image: linear-gradient(90deg, #ffd800 0%, #ff512f 100%, #fff);
    animation: glow-animation 2s infinite linear;
    color: #FFC0CB;
    box-sizing: border-box;
    vertical-align: inherit;
}
@keyframes glow-animation{
    0%{filter:hue-rotate(-360deg)}
    100%{filter:hue-rotate(360deg)}
}
</style>
<style>
    .doudong{
animation: uk-text-shadow-glitch .65s cubic-bezier(1,1,1,1) 0s infinite normal both running;
}
@keyframes uk-text-shadow-glitch {
0% {
text-shadow: none
}
25% {
text-shadow: -2px -2px 0 #ff0048,2px 2px 0 #3234ff
}
50% {
text-shadow: 2px -2px 0 #ff0048,-2px 2px 0 #3234ff
}
75% {
text-shadow: -2px 2px 0 #ff0048,2px -2px 0 #3234ff
}
100% {
text-shadow: 2px 2px 0 #ff0048,-2px -2px 0 #3234ff
}
}
@keyframes uk-flicker {
0% {
opacity: 0
}
10% {
opacity: .6;
transform: scale(.8)
}
20% {
opacity: 0
}
40% {
opacity: 1
}
50% {
opacity: .2;
transform: scale(1.1)
}
100% {
opacity: 1;
transform: scale(1)
}
}
  </style>

【提示】本文为转载 原文链接：https://cangshui.net/4447.html