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;
  }
}

推荐阅读更多精彩内容

  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,201评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 1,334评论 0 11
  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 887评论 0 7
  • 一个人的能力不仅体现在工作方面,还有跟生活息息相关的这几种能力: 语言表达的能力,遇到问题怎么跟身边的人沟通?是为...
    李娜_b39c阅读 94评论 0 1
  • 《三十岁浮屠了谁的流年》 人到这个年龄,就像是用了很长的时间在品一壶茶,除了茶的芬芳,也有人生的种种不惑。 深夜十...
    金小贱贱先生阅读 101评论 1 0
  • 昔日,牛魔王住天庭,实觉甚闷。某年人间水稻疯长,稻穗长势如花菜,满满当当,收割无从下手。甚有垂地,实无良策。人间吵...
    陌上冷阅读 256评论 0 1