编程 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 相关文章推荐

js获取当前select 元素值的代码

Apr 19 Javascript

JS弹出对话框返回值代码(asp.net后台)

Dec 28 Javascript

基于jquery & json的省市区联动代码

Jun 26 Javascript

JavaScript禁止页面操作的示例代码

Dec 17 Javascript

jQuery实现统计输入文字个数的方法

Mar 11 Javascript

jQuery Ajax中的事件详细介绍

Apr 16 Javascript

js+html5实现canvas绘制圆形图案的方法

Jun 05 Javascript

最棒的Angular2表格控件

Aug 10 Javascript

AngularJS使用ocLazyLoad实现js延迟加载

Jul 05 Javascript

微信小程序中setInterval的使用方法

Sep 29 Javascript

Vue.js最佳实践(五招助你成为vuejs大师)

May 04 Javascript

解决echarts数据二次渲染不成功的问题

Jul 20 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

上传多个文件的PHP脚本

2006/11/26 PHP

PHP include任意文件或URL介绍

2014/04/29 PHP

php实现按文件名搜索文件的远程文件查找器

2014/05/10 PHP

PHP使用pcntl_fork实现多进程下载图片的方法

2014/12/16 PHP

使用PHPCMS搭建wap手机网站

2015/09/20 PHP

YII Framework教程之异常处理详解

2016/03/14 PHP

jQuery 1.5.1 发布，全面支持IE9 修复大量bug

2011/02/26 Javascript

Node.js开发指南中的简单实例(mysql版)

2013/09/17 Javascript

《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史

2015/01/09 Javascript

javascript下拉列表菜单的实现方法

2015/11/18 Javascript

AngularJS入门教程之过滤器用法示例

2016/11/02 Javascript

mongoose中利用populate处理嵌套的方法

2017/05/26 Javascript

浅谈微信JS-SDK 微信分享接口开发（介绍版）

2018/08/15 Javascript

前后端如何实现登录token拦截校验详解

2018/09/03 Javascript

vue 获取视频时长的实例代码

2019/08/20 Javascript

AngularJS动态生成select下拉框的方法实例

2019/11/17 Javascript

Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码

2020/05/18 Javascript

[46:44]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第一场 6.2

2018/06/03 DOTA

[05:08]DOTA2-DPC中国联赛3月6日Recap集锦

2021/03/11 DOTA

通过数据库对Django进行删除字段和删除模型的操作

2015/07/21 Python

Python多线程爬虫简单示例

2016/03/04 Python

Python2/3中urllib库的一些常见用法

2017/12/19 Python

浅析Python pandas模块输出每行中间省略号问题

2018/07/03 Python

python实现简单flappy bird

2018/12/24 Python

python使用threading.Condition交替打印两个字符

2019/05/07 Python

python标识符命名规范原理解析

2020/01/10 Python

Python递归及尾递归优化操作实例分析

2020/02/01 Python

Python猫眼电影最近上映的电影票房信息

2020/09/18 Python

父亲追悼会答谢词

2014/01/17 职场文书

幼儿园安全生产月活动总结

2014/07/05 职场文书

领导班子奢靡之风查摆问题及整改措施

2014/09/27 职场文书

购房协议书范本（无房产证）

2014/10/07 职场文书

幼儿园心得体会范文

2016/01/21 职场文书

2016年党员公开承诺书格式范文

2016/03/24 职场文书

golang json数组拼接的实例

2021/04/28 Golang

MySQL update set 和 and的区别

2021/05/08 MySQL