为文字或者边框添加七彩变换效果
作者：互联网
之前的效果是这样
加了之后效果是这样
因为颜色是变化的，没去截动态图。
大致代码利用的css，没用js，不说了代码如下
<style>
.font {
animation: color_change 10000ms ease-out infinite alternate;
font-size: 50px;
color: white;
}
@keyframes color_change {
0% {
border-color: red;
text-shadow: 0 0 10px rgba(255,0,0,0.6), 0 0 10px rgba(255,0,0,0.4), 0 1px 0 rgba(255,0,0,0.2);
box-shadow: 0 0 10px rgba(255,0,0,0.6), 0 0 10px rgba(255,0,0,0.4), 0 1px 0 rgba(255,0,0,0.2);
}
5% {
border-color: red;
text-shadow: 0 0 10px rgba(255,64,0,0.6), 0 0 10px rgba(255,64,0,0.4), 0 1px 0 rgba(255,64,0,0.2);
box-shadow: 0 0 10px rgba(255,64,0,0.6), 0 0 10px rgba(255,64,0,0.4), 0 1px 0 rgba(255,64,0,0.2);
}
10% {
border-color: red;
text-shadow: 0 0 10px rgba(255,128,0,0.6), 0 0 10px rgba(255,128,0,0.4), 0 1px 0 rgba(255,128,0,0.2);
box-shadow: 0 0 10px rgba(255,128,0,0.6), 0 0 10px rgba(255,128,0,0.4), 0 1px 0 rgba(255,128,0,0.2);
}
15% {
border-color: red;
text-shadow: 0 0 10px rgba(255,192,0,0.6), 0 0 10px rgba(255,192,0,0.4), 0 1px 0 rgba(255,192,0,0.2);
box-shadow: 0 0 10px rgba(255,192,0,0.6), 0 0 10px rgba(255,192,0,0.4), 0 1px 0 rgba(255,192,0,0.2);
}
20% {
border-color: red;
text-shadow: 0 0 10px rgba(255,255,0,0.6), 0 0 10px rgba(255,255,0,0.4), 0 1px 0 rgba(255,255,0,0.2);
box-shadow: 0 0 10px rgba(255,255,0,0.6), 0 0 10px rgba(255,255,0,0.4), 0 1px 0 rgba(255,255,0,0.2);
}
25% {
border-color: red;
text-shadow: 0 0 10px rgba(192,255,0,0.6), 0 0 10px rgba(192,255,0,0.4), 0 1px 0 rgba(192,255,0,0.2);
box-shadow: 0 0 10px rgba(192,255,0,0.6), 0 0 10px rgba(192,255,0,0.4), 0 1px 0 rgba(192,255,0,0.2);
}
30% {
border-color: red;
text-shadow: 0 0 10px rgba(128,255,0,0.6), 0 0 10px rgba(128,255,0,0.4), 0 1px 0 rgba(128,255,0,0.2);
box-shadow: 0 0 10px rgba(128,255,0,0.6), 0 0 10px rgba(128,255,0,0.4), 0 1px 0 rgba(128,255,0,0.2);
}
35% {
border-color: red;
text-shadow: 0 0 10px rgba(64,255,0,0.6), 0 0 10px rgba(64,255,0,0.4), 0 1px 0 rgba(64,255,0,0.2);
box-shadow: 0 0 10px rgba(64,255,0,0.6), 0 0 10px rgba(64,255,0,0.4), 0 1px 0 rgba(64,255,0,0.2);
}
40% {
border-color: red;
text-shadow: 0 0 10px rgba(0,255,0,0.6), 0 0 10px rgba(0,255,0,0.4), 0 1px 0 rgba(0,255,0,0.2);
box-shadow: 0 0 10px rgba(0,255,0,0.6), 0 0 10px rgba(0,255,0,0.4), 0 1px 0 rgba(0,255,0,0.2);
}
45% {
border-color: red;
text-shadow: 0 0 10px rgba(0,255,64,0.6), 0 0 10px rgba(0,255,64,0.4), 0 1px 0 rgba(0,255,64,0.2);
box-shadow: 0 0 10px rgba(0,255,64,0.6), 0 0 10px rgba(0,255,64,0.4), 0 1px 0 rgba(0,255,64,0.2);
}
50% {
border-color: red;
text-shadow: 0 0 10px rgba(0,255,128,0.6), 0 0 10px rgba(0,255,128,0.4), 0 1px 0 rgba(0,255,128,0.2);
box-shadow: 0 0 10px rgba(0,255,128,0.6), 0 0 10px rgba(0,255,128,0.4), 0 1px 0 rgba(0,255,128,0.2);
}
55% {
border-color: red;
text-shadow: 0 0 10px rgba(0,255,192,0.6), 0 0 10px rgba(0,255,192,0.4), 0 1px 0 rgba(0,255,192,0.2);
box-shadow: 0 0 10px rgba(0,255,192,0.6), 0 0 10px rgba(0,255,192,0.4), 0 1px 0 rgba(0,255,192,0.2);
}
60% {
border-color: red;
text-shadow: 0 0 10px rgba(0,255,255,0.6), 0 0 10px rgba(0,255,255,0.4), 0 1px 0 rgba(0,255,255,0.2);
box-shadow: 0 0 10px rgba(0,255,255,0.6), 0 0 10px rgba(0,255,255,0.4), 0 1px 0 rgba(0,255,255,0.2);
}
65% {
border-color: red;
text-shadow: 0 0 10px rgba(0,192,255,0.6), 0 0 10px rgba(0,192,255,0.4), 0 1px 0 rgba(0,192,255,0.2);
box-shadow: 0 0 10px rgba(0,192,255,0.6), 0 0 10px rgba(0,192,255,0.4), 0 1px 0 rgba(0,192,255,0.2);
}
70% {
border-color: red;
text-shadow: 0 0 10px rgba(0,128,255,0.6), 0 0 10px rgba(0,128,255,0.4), 0 1px 0 rgba(0,128,255,0.2);
box-shadow: 0 0 10px rgba(0,128,255,0.6), 0 0 10px rgba(0,128,255,0.4), 0 1px 0 rgba(0,128,255,0.2);
}
75% {
border-color: red;
text-shadow: 0 0 10px rgba(0,64,255,0.6), 0 0 10px rgba(0,64,255,0.4), 0 1px 0 rgba(0,64,255,0.2);
box-shadow: 0 0 10px rgba(0,64,255,0.6), 0 0 10px rgba(0,64,255,0.4), 0 1px 0 rgba(0,64,255,0.2);
}
80% {
border-color: red;
text-shadow: 0 0 10px rgba(0,0,255,0.6), 0 0 10px rgba(0,0,255,0.4), 0 1px 0 rgba(0,0,255,0.2);
box-shadow: 0 0 10px rgba(0,0,255,0.6), 0 0 10px rgba(0,0,255,0.4), 0 1px 0 rgba(0,0,255,0.2);
}
85% {
border-color: red;
text-shadow: 0 0 10px rgba(0,0,192,0.6), 0 0 10px rgba(0,0,192,0.4), 0 1px 0 rgba(0,0,192,0.2);
box-shadow: 0 0 10px rgba(0,0,192,0.6), 0 0 10px rgba(0,0,192,0.4), 0 1px 0 rgba(0,0,192,0.2);
}
90% {
border-color: red;
text-shadow: 0 0 10px rgba(0,0,128,0.6), 0 0 10px rgba(0,0,128,0.4), 0 1px 0 rgba(0,0,128,0.2);
box-shadow: 0 0 10px rgba(0,0,128,0.6), 0 0 10px rgba(0,0,128,0.4), 0 1px 0 rgba(0,0,128,0.2);
}
95% {
border-color: red;
text-shadow: 0 0 10px rgba(0,0,64,0.6), 0 0 10px rgba(0,0,64,0.4), 0 1px 0 rgba(0,0,64,0.2);
box-shadow: 0 0 10px rgba(0,0,64,0.6), 0 0 10px rgba(0,0,64,0.4), 0 1px 0 rgba(0,0,64,0.2);
}
100% {
border-color: red;
text-shadow: 0 0 10px rgba(0,0,0,0.6), 0 0 10px rgba(0,0,0,0.4), 0 1px 0 rgba(0,0,0,0.2);
box-shadow: 0 0 10px rgba(0,0,0,0.6), 0 0 10px rgba(0,0,0,0.4), 0 1px 0 rgba(0,0,0,0.2);
}
}
</style>
这个代码有点多，不过颜色变化比较平滑。有种纵向丝滑的感觉
text-shadow这个是文字效果
box-shadow这个是边框特效，可根据实际情况取舍
标签：七彩,0.2,边框,1px,添加,rgba,10px,shadow,255 来源： https://www.cnblogs.com/ai2050/p/10733250.html