纯CSS即可实现文字流光动态功能。
主要是用背景的属性来实现。
实现文字流光效果使用的属性:
background-image: -webkit-linear-gradient(left, red, yellow 25%, blue 50%, green 75%, red 100%); 渐变背景,此处为能无缝拼接的渐变 即0~100%
color: transparent; 文字填充色为透明。
-webkit-text-fill-color: transparent;
-webkit-background-clip: text; 背景剪裁为文字,相当于用背景填充文字 CSS3新属性。
-webkit-background-size: 200% 100%; 背景图片向水平方向扩大一倍,这样background-position才有移动与变化的空间。
-webkit-animation
兼容性:
IE浏览器不支持-webkit-text-fill-color,因此,该效果在IE浏览器中无法正常运行。