纯css实现流光字体动画

今天我们用css实现跳动的荧光字体动画效果。 实现思路-webkit-text-fill-color 也就是字体填充色

1. 第一步

<div class="title">hello world</div>

2. 第二步 给容器设置背景填充

display: inline-block;
background-image: linear-gradient(
    45deg,
    #1a6a66,
    #2da8a2,
    #41e9e1,
    #248b86);
background-size: 300%;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: Gradient 7s ease infinite

3. 第三步加上动画 改变背景的定位

@keyframes Gradient {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }