web前端-CSS3实现文字流光渐变

效果图:

文字流光渐变

点击这里查看效果

用到的CSS3属性

• background-image: 背景图, 设置成渐变背景
• background-clip: 背景图裁剪, 让背景按照文字来裁剪, 需要针对不同的浏览器添加前缀如:-webkit-background-clip
• text-fill-colororcolor: 设置字体颜色transparent(透明)
• background-size:设置背景图的长度
• animation: 定义一个动画移动背景

属性说明

• -webkit-linear-gradient: (left, red 10%,blue 50%,green 60% , yellow 100%);
  left: 表示从左到右渐变, 后面表示颜色值 所占的百分比, 需要注意的是我们在设置的时候回将颜色值设置成 0%_49%=50%99%, 主要为了在背景做移动动画的时候有产生无缝衔接的效果.
• -webkit-background-clip: 裁剪背景图, 值为text说明文字作为裁剪区域, 为了能看到背景, 我们还需要将文字颜色设置成透明
• animation: css3动画用于移动渐变的背景, 修改background-position属性即可.需要无限滚动infinite
  代码如下:

<div class='box'>LiYajie Coding</div>

样式:

body{
  background-color:#000;
}
.box{
  width:600px;
  margin: 100px auto;
  border:1px solid #0094ff;
  padding: 20px;
  background-image:-webkit-linear-gradient(left,#3498db 0%,#f47920 10%,#d71345 20%,#f7acbc 30%,#ffd400 40%,#3498db 50%,#f47920 60%,#d71345 70%,#f7acbc 80%,#ffd400 90%,#3498db 100%);
  color:transparent;
  background-size:200% 100%;
  -webkit-background-clip:text;
  font-size:4em;
  text-align:center;
  animation: move 3s infinite linear;
}
@keyframes move{
  0%{
    background-position:0 0;
  }
  100%{
    background-position:-100% 0;
  }
}