css3 文字渐变动画效果

川长思鸟来 2022-12-07 11:40 352阅读 0赞 
  1. .css { 
  2.     background-image: -webkit-linear-gradient(left, red, blue 25%, #147B96 50%, yellow 75%, green);
  3.     -webkit-text-fill-color: transparent;
  4.     -webkit-background-clip: text;
  5.     -webkit-background-size: 200% 100%;
  6.     -webkit-animation: masked-animation 5s infinite linear;
  7. }
  9. @keyframes masked-animation { 
  10.   0%  {  background-position: 0 0;}
  11.   100% {  background-position: -100% 0;}
  12. }
  13. @-webkit-keyframes masked-animation { 
  14.   0%  {  background-position: 0 0;}
  15.   100% {  background-position: -100% 0;}
  16. }
  18. <View class="css">
  19.     快来约我吧
  20. </View>

发表评论

表情：
评论列表 （有 0 条评论，352人围观）

还没有评论，来说两句吧...

相关阅读

    相关 css3 文字渐变

    之前一直没有遇到过让文字渐变，这次也算是遇到了，没办法啊，又是一个不知道的知识点。这么久了，学到最多的也算是有问题找百度，度娘是真的好啊。 ![度娘真棒啊][waterma

    喜欢ヅ旅行喜欢ヅ旅行/ 0 赞/ 226 阅读