百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。学院组织了一批百度在职工程师,精心编写了数十个实践编码任务,将技术知识点系统有机地串联在各个充满趣味与挑战的任务中,同学们通过实际地编码练习来掌握知识,再辅以互相评价、学习笔记等方式,加深对于学习内容的理解。在过去的三年中,百度前端技术学院累积吸引了上万名同学参加,并且有数十名同学在学习后,顺利加入了百度,成为了百度的前端工程师。

CSS3 字体流光渐变效果

作者NightCat课程有趣的鼠标悬浮模糊效果5304次浏览942017-02-24 13:36

主要是用下面几个CSS属性实现的:

  1. background-image
  2. -webkit-background-clip
  3. -webkit-text-fill-color
  4. background-size
  5. animation

具体实现

绘制渐变背景图

background-image: -webkit-linear-gradient(left, blue, red 25%, blue 50%, red 75%, blue 100%);
使用CSS3的渐变绘制图像,从左到右。
需要注意的是颜色是 0到49%的颜色组 = 50%到99%的颜色组,且最后100%的颜色要和开头0的颜色相等
这是为了能无缝衔接流光效果, 之后有说到

裁剪背景图

-webkit-background-clip: text;
使用文字作为裁剪区域向外裁剪,此时文字颜色仍覆盖背景图

设置字体颜色

-webkit-text-fill-color: transparent; or color: transparent;
将字体颜色设置成透明,这样就能将背景图显示出来了

设置背景图长度

background-size: 200% 100%;
将背景图宽度拉长至两倍,之前设置background-image的两份相同的颜色组,就是为了能在此拉长后只显示一份颜色组,另外超出的半截颜色组用来实现流光效果

开始动画

animation: streamer 5s infinite linear;

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

最后通过动画改变背景图的位置实现流光效果

我的实现0w0

23条评论