网站使用CSS和JS两种方法实现颜色渐变文字效果代码

教程 1个月前 壳壳
331 0 0
最后更新于2023年4月22日,已超过41天没有更新,如果内容或图片资源失效,请留言反馈,我会及时处理,谢谢!

演示图

网站使用CSS和JS两种方法实现颜色渐变文字效果代码

代码

css实现颜色渐变文字效果代码:

<!-- css颜色渐变变色文字 -->
<div id="momk">
<div style="text-align:center;">
颜色渐变文字效果
</div></div>
<style>
#momk{animation:change 10s infinite;font-weight:100; }
@keyframes change{0%{color:#5cb85c;}25%{color:#556bd8;}50%{color:#e40707;}75%{color:#66e616;}100% {color:#67bd31;}}
</style>

 

js实现颜色渐变文字效果代码:

<!-- js颜色渐变色文字 -->
<div id="moml">
<div style="text-align:center;">
颜色渐变文字效果
</div>
<script language="javascript">
function changeColor(){ var color="#f00|#0f0|#00f|#880|#808|#088|yellow|green|blue|gray"; color=color.split("|"); document.getElementById("moml").style.color=color[parseInt(Math.random() * color.length)]; } setInterval("changeColor()",200); </script>
</div>

还有另外一个方法实现

版权声明:壳壳 发表于 2023年4月22日 pm1:29。
转载请注明:网站使用CSS和JS两种方法实现颜色渐变文字效果代码 | 壳壳博客

相关文章

暂无评论

您必须登录才能参与评论!
立即登录
暂无评论...