鼠标移入文字添加阴影溢出的文字添加多重颜色

最新推荐文章于 2022-03-03 12:13:08 发布

weixin_33769207

最新推荐文章于 2022-03-03 12:13:08 发布

阅读量156

点赞数

文章标签： python

原文链接：https://my.oschina.net/newgoup/blog/490666

版权

2019独角兽企业重金招聘Python工程师标准>>>

给文字添加多重颜色

webkit-text-fill-color:blue;         
-webkit-text-stroke:1px red;
-webkit-text-stroke-width:1px;
-webkit-text-stroke-color:pink;

让溢出的文字变为...

white-space:nowrap;
text-overflow:ellipsis ;

给文字添加阴影

text-shadow:2px 2px 2px #000000;

鼠标移入文字添加阴影：

window.onload=function  () {
    var div=document.getElementsByTagName("div")[0];
    var num=0;
    var t;
    div.onmouseover=function  () {
      clearInterval(t);
      t=setInterval(function(){
       num++;
       if(num>=5){
        clearInterval(t)
       }else{
        div.style.textShadow=num+"px "+num+"px "+num+"px #333";
        }
      },60)
      
   }
   div.onmouseout=function  () { 
      clearInterval(t);
      t=setInterval(function(){
       num--;
       if(num<=0){
        clearInterval(t)
       }else{
        div.style.textShadow=num+"px "+num+"px "+num+"px #333";
        }
      },60)
      
   }
  }
</script>

转载于:https://my.oschina.net/newgoup/blog/490666