信息

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

添加步骤

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

 

🌟-阅读剩余-🌟
版权声明 1、本网站名称:安鹿轩
2、本站永久网址:https://www.anlu1314.com
3、本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系在本站私信站长进行删除处理。
4、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
6、本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。

THE END