李晨的博客
0%

CSS实现流光文字

Posted on Edited on In

公司的一个内部导航网站的标题使用了流光文字的效果,感觉还不错.百度搜了一下大概知道了原理. 具体代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#text {
            margin-top: 100px;
            line-height: 145px;
            text-align: center;
            font-size: 50px;
            letter-spacing: 10px;
            /* -webkit-text-fill-color: transparent; */
            color: transparent;
            background-size: 200% 100%;
            background-image: linear-gradient(to right, #4261aa, #6d87da 25%, #93b9ed 50%, #acd7f5 75%, #ffffff 100%);
            -webkit-background-clip: text;
            animation: text 5s linear infinite;
            background-clip: text;
        }

        @keyframes text {
            0% {
                background-position: 0 0;
            }

            100% {
                background-position: 100% 0;
            }
        }

只需要把元素的 text 或者 text-fill-color 设置为 transparent ,然后设置元素的背景为渐变色,background-size 宽度设为 200%,扩大背景,设置-webkit-background-clip 为 text,背景色只覆盖文字 .最后使用 animation 动画变更 background-position 的位置即可. 效果如下图：

yourname

(渐变颜色差距不是很大,所以效果不是很明显.比较明显的是 这个 ) .借这个机会也学习了一波 background 的知识：

background

background 是一个简写属性,可以定义相关的多个属性,比如：

1
2
3
.test {
  background: left 5% / 15% 60% repeat-x url('../../media/examples/star.png');
}

等于

1
2
3
4
5
6
.test {
    background-position:left 5%;
    background-size:15% 60%；
    background-repeat:repeat-x;
    background-image:url('../../media/examples/star.png')
}

注意：对于 background 属性,所有没有被指定的值都会被设定为它们的初始值.

1
2
3
4
5
.test {
  background-size: cover;
  background-position: 50%;
  background: url('./test.png') /*这样写会导致上面设置的两项属性被重置为默认值;*/
}

background-attachment

background-attachment 决定了背景图片在出现滚动条的情况下应该如何运动.说起来比较抽象,具体参看MDN上的例子： https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-attachment

background-size

background-size 设置背景图片大小.图片可以保有其原有的尺寸,或者拉伸到新的尺寸,或者在保持原有比例的同时缩放到元素的可用空间的尺寸.

1
2
3
4
5
6
.test {
    background-size:cover /* 缩放背景图片以完全覆盖背景,可能背景图片部分会看不见 */
    background-size:contain /* 缩放背景图片以完全装入背景区 */
    background-size:100% 100% /* 完全覆盖背景,把图片按照容器的长宽比进行压缩,当图片的长宽比与容器本身的长宽比不一致时,图片会发生形变 */
}

background-repeat

这个属性用于控制当容器的长宽大于背景的长宽的时候,是否要重复显示.默认是repeat,即可以重复显示.一般使用的是 no-repeat

background-position

background-position 为每一个背景图片设置初始位置.它的属性值可以是关键字,百分比或者像素.

1
2
3
4
5
.test {
    background-position:center; /*背景图片相对容器居中*/
    background-position:bottom -50px right 10% /* 背景图片相对容器下移50px,图片底部的50px会消失  图片右侧距容器距离为 容器和图片的宽度差 *10%  */

}

background-clip

background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面.

1
2
3
.test {
    background-clip:text /*以区块内的文字作为裁剪区域向外裁剪,文字的背景即为区块的背景,文字之外的区域将被裁剪掉.实测兼容性很差,需要加-webkit前缀*/）
}

background-image

background-image 可以为一个元素设置一个或者多个背景图像.图像以 Z 方向堆叠的方式进行.先指定的图像会在之后指定的图像上绘制.

1
2
3
4
.test {
    background-image:url("../../media/examples/star.png"),
                     url("../../media/examples/lizard.png");
}

linear-gradient

linear-gradient() 函数用于创建一个线性渐变的”图像”.

1
2
3
.test {
    background-image:linear-gradient(to right,red,yellow);
}

参考链接：

  1. css3 text-fill-color 简介 - https://www.cnblogs.com/jiajia123/p/6493011.html

  2. 完整代码 -

    https://lichen404.github.io/FuckCSS/%E6%B5%81%E5%85%89%E6%96%87%E5%AD%97/%E6%B5%81%E5%85%89%E6%96%87%E5%AD%97.html

  3. MDN-background - https://developer.mozilla.org/zh-CN/docs/Web/CSS/background#%3Cposition%3E

  4. 奇妙的-webkit-background-clip:text - https://github.com/chokcoco/iCSS/issues/14