使用CSS和JS两种方法实现颜色渐变文字效果代码(css字体渐变颜色)

追月流涟

演示图

1

代码

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>



-----本页内容已结束,喜欢请分享-----


© 版权声明
版权声明
本站网站名称:追月流涟教程网
本站永久网址:https://www.zyds666.cn
网站侵权说明: 本站采用 CC BY-NC-SA 4.0 国际许可协议 进行许可,转载或引用本站文章应遵循相同协议。
1、本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长QQ进行删除处理。
2、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
3、本站禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报。
4、本站资源大多存储在云盘,如发现链接失效,请联系我们将会第一时间更新。
站长邮箱:abcdefghijklm1211@qq.com

发表评论

快捷回复: 表情:
评论列表 (暂无评论,316人围观)

还没有评论,来说两句吧...

取消
微信二维码
微信二维码
支付宝二维码
我是分割线
我也是有底线哒~