JS实现字体背景跑马灯

　　

本文实例为大家分享了JS实现字体背景跑马灯的具体代码,供大家参考,具体内容如下

　　

<强>知识点

　　

1。通过@keyframes规则,创建动画。
　　2.背景作用域:
　　

　　 　　 　　background-clip:文本; 　　-webkit-background-clip:文本; 　　 　　

3。背景位置定位背景图像
　　4.颜色:透明全透明
　　

　　

运行效果

　　

JS实现字体背景跑马灯

　　

JS实现字体背景跑马灯

　　

代码 　　 　　 　　& lt; !DOCTYPE html> 　　& lt; html lang=癳n”比; 　　& lt; head> 　　& lt;元charset=皍tf - 8”比; 　　& lt; title> Title 　　& lt; style> 　　div { 　　text-align:中心; 　　背景颜色:黑色; 　　填充:10 px 0; 　　} 　　.animated { 　　草书字体类型:华文行楷; 　　保证金:0; 　　填充:0; 　　字体大小:100 px; 　　背景:url (text-bg.png)不再重演; 　　background-clip:文本; 　　-webkit-background-clip:文本; 　　颜色:透明; 　　动画:90年代moveBg线性无限; 　　90年代-webkit-animation: moveBg线性无限; 　　} 　　 　　@keyframes moveBg { 　　0% { 　　背景位置:0 30%; 　　} 　　 　　100% { 　　背景位置:100% - 50%; 　　} 　　} 　　 　　& lt;/style> 　　& lt;/head> 　　& lt; body> 　　& lt; div> 　　& lt; h2类="动画"祝辞欢迎到来& lt;/h2> 　　& lt;/div> 　　& lt;/body> 　　& lt;/html> 　　 　　

所使用的背景图片

　　

JS实现字体背景跑马灯

　　

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

JS实现字体背景跑马灯