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

给文字添加多重颜色

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>


你可能感兴趣的:(鼠标移入文字添加阴影 溢出的文字 添加多重颜色)