css 文字变色

原创已于 2022-03-09 11:45:08 修改 · 582 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #sass #html

于 2022-03-07 16:48:16 首次发布

这篇博客介绍了如何使用CSS实现一个从左到右的线性渐变背景动画，并结合透明文字效果。文章通过`@keyframes`定义动画，`background-image`设置渐变背景，`-webkit-text-fill-color`和`-webkit-background-clip`属性实现文字透明且背景颜色随动画变化的效果。

<span>4566546123131313132</span>

<style scoped lang="scss">

   @-webkit-keyframes bgp{
    0%{
        background-position: 0 0;
    }
    100%{
        background-position: -100% 0;
    }
  }
  span{
        background-image: linear-gradient(to right, red, orange, yellow, green, blue,                 
        green, yellow, orange, red, orange, yellow, green, blue, green, yellow, orange, 
        red);    
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        -webkit-background-size: 200% 100%;
        animation: bgp 5s infinite linear;
   }
    
</style>