编程 Javascript

JS实现字体背景跑马灯

Posted in Javascript onJanuary 06, 2020

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

知识点

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

background-clip: text;
-webkit-background-clip: text;

3.background-position定位背景图像
4.color: transparent 全透明

运行效果

JS实现字体背景跑马灯

代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div{
      text-align: center;
      background-color: black;
      padding: 10px 0;
    }
    .animated {
      font-family: 华文行楷, cursive;
      margin: 0;
      padding: 0;
      font-size: 100px;
      background: url('text-bg.png') no-repeat;
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      animation: moveBg 90s linear infinite;
      -webkit-animation: moveBg 90s linear infinite;
    }

    @keyframes moveBg {
      0% {
        background-position: 0 30%;
      }

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

  </style>
</head>
<body>
<div>
  <h1 class="animated">欢迎到来</h1>
</div>
</body>
</html>

所使用的背景图片

JS实现字体背景跑马灯

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

JS实现字体背景跑马灯

- Author -

KaiSarH

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jquery $.trim()方法使用介绍

May 21 Javascript

在Linux上用forever实现Node.js项目自启动

Jul 09 Javascript

使用jQuery实现星级评分代码分享

Dec 09 Javascript

2种jQuery 实现刮刮卡效果

Feb 01 Javascript

JS限制文本框只能输入数字和字母方法

Feb 28 Javascript

微信小程序仿美团分类菜单 swiper分类菜单

Apr 12 Javascript

微信小程序图片选择区域裁剪实现方法

Dec 02 Javascript

Vue手把手教你撸一个 beforeEnter 钩子函数

Apr 24 Javascript

vue.js层叠轮播效果的实例代码

Nov 08 Javascript

vue微信分享出来的链接点开是首页问题的解决方法

Nov 28 Javascript

微信公众号H5支付接口调用方法

Jan 10 Javascript

js实现提交前对列表数据的增删改查

Jan 16 Javascript

JS实现音乐钢琴特效

Jan 06 #Javascript

React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析

Jan 06 #Javascript

Vue-CLI与Vuex使用方法实例分析

Jan 06 #Javascript

Vue前端项目部署IIS的实现

Jan 06 #Javascript

Vue学习之常用指令实例详解

Jan 06 #Javascript

Vue学习之组件用法实例详解

Jan 06 #Javascript

Vue+abp微信扫码登录的实现代码示例

Jan 06 #Javascript

You might like

全文搜索和替换

2006/10/09 PHP

11个PHP 分页脚本推荐

2011/08/15 PHP

JavaScript 组件之旅（二）编码实现和算法

2009/10/28 Javascript

Javascript 通过json自动生成Dom的代码

2010/04/01 Javascript

加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)

2013/06/26 Javascript

jQuery+ajax实现鼠标单击修改内容的思路

2014/06/29 Javascript

jQuery+css实现非常漂亮的水平导航菜单效果

2016/07/27 Javascript

JS控制页面跳转时未请求要跳转的地址怎么回事

2016/10/14 Javascript

详解js运算符单竖杠“|”与“||”的用法和作用介绍

2016/11/04 Javascript

Vue.js鼠标悬浮更换图片功能

2017/05/17 Javascript

javascript 开发之网页兼容各种浏览器

2017/09/28 Javascript

初学者AngularJS的环境搭建过程

2017/10/27 Javascript

axios post提交formdata的实例

2018/03/16 Javascript

JavaScript实现简单动态进度条效果

2018/04/06 Javascript

关于Angularjs中自定义指令一些有价值的细节和技巧小结

2018/04/22 Javascript

vue项目创建并引入饿了么elementUI组件的步骤

2019/04/11 Javascript

基于JS实现table导出Excel并保留样式

2020/05/19 Javascript

vant-ui组件调用Dialog弹窗异步关闭操作

2020/11/04 Javascript

python 文件与目录操作

2008/12/24 Python

python检查序列seq是否含有aset中项的方法

2015/06/30 Python

Python只用40行代码编写的计算器实例

2017/05/10 Python

完美解决python中ndarray 默认用科学计数法显示的问题

2018/07/14 Python

numpy.where() 用法详解

2019/05/27 Python

Python 安装第三方库 pip install 安装慢安装不上的解决办法

2019/06/18 Python

python-django中的APPEND_SLASH实现方法

2019/06/21 Python

使用tensorflow DataSet实现高效加载变长文本输入

2020/01/20 Python

html5使用Canvas绘图的使用方法

2017/11/21 HTML / CSS

深入浅析HTML5中的SVG

2015/11/27 HTML / CSS

荟萃全球保健品：维他购

2018/05/09 全球购物

法国隐形眼镜网站：VisionDirect.fr

2020/03/03 全球购物

学生爱国演讲稿

2014/01/14 职场文书

上课随便讲话检讨书

2014/09/12 职场文书

法院授权委托书格式

2014/09/28 职场文书

教师节老师寄语

2015/05/28 职场文书

雄兵连：第三季先行图公开，天使恶魔联合，银河之力的新力量

2021/06/11 国漫

Python-OpenCV教程之图像的位运算详解

2021/06/21 Python