【技术分享】为网页添加字体闪烁(变色)特效

添加步骤

给要添加特效的元素添加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>

 


公告:快来抢广告位吧! 联系q:3533464073
© 版权声明

文章版权声明

1、本网站名称:安鹿轩

2、本站永久网址:www.anlu1314.com

3.安鹿轩(下文简称本站)提供的所有内容仅供学习、交流和分享用途,只供参考。

4.本站资源禁止并谢绝未经本站许可的使用,如若欲转载,请署名以及注明出处,请务必以文字链接的形式标明或保留文章原始出处和作者的信息。

5.本站(原创)文章、资源、图片等所有内容,一经转载,即表示您已经接受上述声明!需自行承担一切风险与责任!

6.关于本站的所有留言评论与转载、引用文纯属文字原作者个人观点,与本站观点及立场无关!

7.如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

8.有任何侵权问题请联系E-mail [email protected]

THE END
感谢支持啦!୧( ⁼̴̶̤̀ω⁼̴̶̤́ )૭
点赞8 分享
让我来说两句( ˃̶̤́ ꒳ ˂̶̤̀ ) 抢沙发
头像
来来来,畅所欲言吧༼。^・ェ・^。༽
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容