动画-webkit-文本填充色

  • Z时代
  • 2024-01-10
  • 分类：问答

尝试使用WebKit的文本填充色动画-webkit-文本填充色

a { 
    color: #fff; 
    -webkit-text-fill-color: rgba(255,255,255,0); 
    -webkit-text-stroke-width: 2px; 
    -webkit-text-stroke-color: #fff; 
    -webkit-text-stroke: 2px white; 
    -webkit-transition: all .5s ease-out; 
    -moz-transition: all .5s ease-out; 
    -o-transition: all .5s ease-out; 
    transition: all .5s ease-out; 
    } 
a:hover { 
    -webkit-text-fill-color: rgba(255,255,255,1); 
}

我不能将颜色设置为透明，因为-webkit的兼容性问题动画文本的透明度在IE上使用-text-fill-color和-webkit-text-stroke。

回答：

对不起，我没有IE浏览器来测试它在我的Mac，请试试这个代码

a {  
    color: #d5d5d5;  
    -webkit-text-fill-color: rgba(225,255,255,0);  
    -webkit-text-stroke-width: 2px;  
    -webkit-text-stroke-color: #d5d5d5;  
    -webkit-text-stroke: 2px #d5d5d5;  
    -webkit-transition: all .5s ease-out;  
-moz-transition: all .5s ease-out; /*gecko*/  
-ms-transition: all .5s ease-out; /*IE10*/  
-o-transition: all .5s ease-out; /*opera 11.10+*/  
-pie-transition: all .5s ease-out; /*PIE*/  
    transition: all .5s ease-out;  
    }  
a:hover {  
    color: #000;  
    -webkit-text-fill-color: rgba(255,255,255,1);  
    -webkit-text-stroke-width: 2px;  
    -webkit-text-stroke-color: #000;  
-moz-transition: all .5s ease-out; /*gecko*/  
-ms-transition: all .5s ease-out; /*IE10*/  
-o-transition: all .5s ease-out; /*opera 11.10+*/  
-pie-transition: all .5s ease-out; /*PIE*/  
    transition: all .5s ease-out;  
}

<a href="#">Test</a>

以上是 动画-webkit-文本填充色 的全部内容， 来源链接： utcz.com/qa/261285.html

回到顶部