css 流光字体

1.设计html

      <div id="font"  >
        <p>欢迎参加百度前端技术学院</p>
        <p>点击报名</p>
      </div>

2.p元素中字体为流光字体，所以为div设置背景色，为p设置字体颜色为transparent

#font{
  width: 400px;
  height: 400px;
  padding-top: 100px;
  margin: 0 auto;
  background-color: black;
}
#font p{
  text-align: center;
  background-image: -webkit-linear-gradient(left, blue, red 25%, blue 50%, red 75%, blue 100%); -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  animation: stream 3s infinite linear;
  background-size: 200% 100%;
}

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

3.为p设置颜色流动的背景

background-color表示的区域从border左上角到右下角，background-image表示的区域从padding左上角到border右下角，所以产生了 background-clip

background-clip通常用来设置背景裁剪区域，而webkit下background-clip还有一个更神奇的效果，就是可以让图片填充文本，那就是background-clip:text配合其私有属性-webkit-text-fill-color: transparent,把图片设置成流动的颜色就成流光字体啦

-webkit-linear-gradient(left, blue, red 25%, blue 50%, red 75%, blue 100%);首个参数接受渐变的角度，可为top\bottom\left\right\10deg,后面紧跟颜色，添加占比

背景图片Width为200%，动画每3s执行完一次，不停地执行，匀速

转载于:https://www.cnblogs.com/qmxj-blog/p/6641692.html