动画-webkit-文本填充色

Question

尝试使用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。

Answer 1

对不起，我没有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>