为文字或者边框添加七彩变换效果

之前的效果是这样

加了之后效果是这样

因为颜色是变化的，没去截动态图。
大致代码利用的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这个是边框特效，可根据实际情况取舍

• « 上一篇：基于FFmpeg和Android的音视频同步播放实现
• » 下一篇：《七哥说道》第十章：今天我，寒夜里看雪飘过