js代码|让文字闪动性感起来（js文字闪烁代码）
时间：2022-10-16 14:51:21 阅读：567
<b class="rainbow">妖娆动态文字</b>
<style>
.rainbow {
text-shadow: -1px 1px 0 #FFD180;
-webkit-animation: 1s infinite rainbowText;
animation: 1s infinite rainbowText;
}
@-webkit-keyframes rainbowText {
0% {
text-shadow: -0.1rem 0.1rem #FFFF8D, -0.2rem 0.2rem #CCFF90, -0.3rem 0.3rem #A7FFEB, -0.4rem 0.4rem #82B1FF, -0.5rem 0.5rem #B388FF, -0.6rem 0.6rem #EA80FC, -0.7rem 0.7rem #FF80AB, -0.8rem 0.8rem #FFD180;
}
12.5% {
text-shadow: -0.1rem 0.1rem #FFD180, -0.2rem 0.2rem #FFFF8D, -0.3rem 0.3rem #CCFF90, -0.4rem 0.4rem #A7FFEB, -0.5rem 0.5rem #82B1FF, -0.6rem 0.6rem #B388FF, -0.7rem 0.7rem #EA80FC, -0.8rem 0.8rem #FF80AB;
}
25% {
text-shadow: -0.1rem 0.1rem #FF80AB, -0.2rem 0.2rem #FFD180, -0.3rem 0.3rem #FFFF8D, -0.4rem 0.4rem #CCFF90, -0.5rem 0.5rem #A7FFEB, -0.6rem 0.6rem #82B1FF, -0.7rem 0.7rem #B388FF, -0.8rem 0.8rem #EA80FC;
}
37.5% {
text-shadow: -0.1rem 0.1rem #EA80FC, -0.2rem 0.2rem #FF80AB, -0.3rem 0.3rem #FFD180, -0.4rem 0.4rem #FFFF8D, -0.5rem 0.5rem #CCFF90, -0.6rem 0.6rem #A7FFEB, -0.7rem 0.7rem #82B1FF, -0.8rem 0.8rem #B388FF;
}
50% {
text-shadow: -0.1rem 0.1rem #B388FF, -0.2rem 0.2rem #EA80FC, -0.3rem 0.3rem #FF80AB, -0.4rem 0.4rem #FFD180, -0.5rem 0.5rem #FFFF8D, -0.6rem 0.6rem #CCFF90, -0.7rem 0.7rem #A7FFEB, -0.8rem 0.8rem #82B1FF;
}
62.5% {
text-shadow: -0.1rem 0.1rem #82B1FF, -0.2rem 0.2rem #B388FF, -0.3rem 0.3rem #EA80FC, -0.4rem 0.4rem #FF80AB, -0.5rem 0.5rem #FFD180, -0.6rem 0.6rem #FFFF8D, -0.7rem 0.7rem #CCFF90, -0.8rem 0.8rem #A7FFEB;
}
75% {
text-shadow: -0.1rem 0.1rem #A7FFEB, -0.2rem 0.2rem #82B1FF, -0.3rem 0.3rem #B388FF, -0.4rem 0.4rem #EA80FC, -0.5rem 0.5rem #FF80AB, -0.6rem 0.6rem #FFD180, -0.7rem 0.7rem #FFFF8D, -0.8rem 0.8rem #CCFF90;
}
87.5% {
text-shadow: -0.1rem 0.1rem #CCFF90, -0.2rem 0.2rem #A7FFEB, -0.3rem 0.3rem #82B1FF, -0.4rem 0.4rem #B388FF, -0.5rem 0.5rem #EA80FC, -0.6rem 0.6rem #FF80AB, -0.7rem 0.7rem #FFD180, -0.8rem 0.8rem #FFFF8D;
}
100% {
text-shadow: -0.1rem 0.1rem #FFFF8D, -0.2rem 0.2rem #CCFF90, -0.3rem 0.3rem #A7FFEB, -0.4rem 0.4rem #82B1FF, -0.5rem 0.5rem #B388FF, -0.6rem 0.6rem #EA80FC, -0.7rem 0.7rem #FF80AB, -0.8rem 0.8rem #FFD180;
}
}
@keyframes rainbowText {
0% {
text-shadow: -0.1rem 0.1rem #FFFF8D, -0.2rem 0.2rem #CCFF90, -0.3rem 0.3rem #A7FFEB, -0.4rem 0.4rem #82B1FF, -0.5rem 0.5rem #B388FF, -0.6rem 0.6rem #EA80FC, -0.7rem 0.7rem #FF80AB, -0.8rem 0.8rem #FFD180;
}
12.5% {
text-shadow: -0.1rem 0.1rem #FFD180, -0.2rem 0.2rem #FFFF8D, -0.3rem 0.3rem #CCFF90, -0.4rem 0.4rem #A7FFEB, -0.5rem 0.5rem #82B1FF, -0.6rem 0.6rem #B388FF, -0.7rem 0.7rem #EA80FC, -0.8rem 0.8rem #FF80AB;
}
25% {
text-shadow: -0.1rem 0.1rem #FF80AB, -0.2rem 0.2rem #FFD180, -0.3rem 0.3rem #FFFF8D, -0.4rem 0.4rem #CCFF90, -0.5rem 0.5rem #A7FFEB, -0.6rem 0.6rem #82B1FF, -0.7rem 0.7rem #B388FF, -0.8rem 0.8rem #EA80FC;
}
37.5% {
text-shadow: -0.1rem 0.1rem #EA80FC, -0.2rem 0.2rem #FF80AB, -0.3rem 0.3rem #FFD180, -0.4rem 0.4rem #FFFF8D, -0.5rem 0.5rem #CCFF90, -0.6rem 0.6rem #A7FFEB, -0.7rem 0.7rem #82B1FF, -0.8rem 0.8rem #B388FF;
}
50% {
text-shadow: -0.1rem 0.1rem #B388FF, -0.2rem 0.2rem #EA80FC, -0.3rem 0.3rem #FF80AB, -0.4rem 0.4rem #FFD180, -0.5rem 0.5rem #FFFF8D, -0.6rem 0.6rem #CCFF90, -0.7rem 0.7rem #A7FFEB, -0.8rem 0.8rem #82B1FF;
}
62.5% {
text-shadow: -0.1rem 0.1rem #82B1FF, -0.2rem 0.2rem #B388FF, -0.3rem 0.3rem #EA80FC, -0.4rem 0.4rem #FF80AB, -0.5rem 0.5rem #FFD180, -0.6rem 0.6rem #FFFF8D, -0.7rem 0.7rem #CCFF90, -0.8rem 0.8rem #A7FFEB;
}
75% {
text-shadow: -0.1rem 0.1rem #A7FFEB, -0.2rem 0.2rem #82B1FF, -0.3rem 0.3rem #B388FF, -0.4rem 0.4rem #EA80FC, -0.5rem 0.5rem #FF80AB, -0.6rem 0.6rem #FFD180, -0.7rem 0.7rem #FFFF8D, -0.8rem 0.8rem #CCFF90;
}
87.5% {
text-shadow: -0.1rem 0.1rem #CCFF90, -0.2rem 0.2rem #A7FFEB, -0.3rem 0.3rem #82B1FF, -0.4rem 0.4rem #B388FF, -0.5rem 0.5rem #EA80FC, -0.6rem 0.6rem #FF80AB, -0.7rem 0.7rem #FFD180, -0.8rem 0.8rem #FFFF8D;
}
100% {
text-shadow: -0.1rem 0.1rem #FFFF8D, -0.2rem 0.2rem #CCFF90, -0.3rem 0.3rem #A7FFEB, -0.4rem 0.4rem #82B1FF, -0.5rem 0.5rem #B388FF, -0.6rem 0.6rem #EA80FC, -0.7rem 0.7rem #FF80AB, -0.8rem 0.8rem #FFD180;
}
}
</style>
网友评论