TypechoJoeTheme

尘遇 logo

当我遇上你
排行榜
统计
文章目录

为网页添加字体闪烁(变色)特效

醉书生站长
3个月前
1 评论
210 阅读
检测收录...
07/02
本文最后更新于2021年07月02日,已超过106天没有更新,若内容或图片失效,请留言反馈。

本篇文章教大家如何给自己的网页添加一个字体闪烁(变色)特效。

添加步骤

给要添加特效的元素添加class:magic-color
将以下代码复制到元素后面(多个元素则放到最后一个元素后面)

<script>
function magicColor(mode,t){
    t=t||10;
    let elem=document.getElementsByClassName("magic-color");
    if(!elem){
        setTimeout(function(){
            magicColor(mode,t-1);
        },400);
        return;
    }
    if(window.mcHandler==undefined){
        window.mcHandler={elements:[]};
        window.mcHandler.colorIndex=0;
        window.mcHandler.run=function(mode){
            let color=mode=="random"?("rgb("+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+",1)"):["#CC0000","#9999CC","#CC3366","#669999","#FFCC00","#00CCCC","#CC00CC"][(window.mcHandler.colorIndex++)%7];
            for(var i=0,L=window.mcHandler.elements.length;i<L;i++)window.mcHandler.elements[i].style.color=color;
        }
    }
    window.mcHandler.elements=elem;
    if(window.mcHandler.timer==undefined){
        window.mcHandler.timer=setInterval(()=>{window.mcHandler.run(mode)},500);
    }
}
magicColor(random);//random为随机颜色,否则为固定颜色随机;上方“闪烁(变色)”字样为固定颜色随机
</script>
本文共98个字数,您已阅读:平均阅读时长≈1分钟。
朗读
点赞
0
赞赏
海报
人生
欢迎
要时间嘉许,等春风得意,我正好遇上你!

微信/QQ/支付宝三合一收款码

微信
QQ
支付宝
打开微信/QQ/支付宝扫一扫,即可进行扫码打赏!
版权属于:

尘遇

最后修改:

2021 年 07 月 02 日 03 : 43 PM

本文链接:

https://chenyu.me/1420.html(转载时请注明本文出处及文章链接)

已有 1 条评论
  1. Wayne秀才 作者
    Windows 10 · Google Chrome
    沙发

    求网站右边的颜色选择器

    2021-07-02 22:58 回复

光阴者,百代之过客

今日已经过去小时
这周已经过去
本月已经过去
今年已经过去个月

最新回复

  1. chz举人
    2021-10-16

  2. ZMR秀才
    2021-10-16
  3. 鑫旺秀才
    2021-10-15
  4. ZMR秀才
    2021-10-15
  5. WF.秀才
    2021-10-14