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

JavaScript面向对象之静态与非静态类

Feb 03 Javascript

JS+CSS实现经典的左侧竖向滑动菜单效果

Sep 23 Javascript

js字符串引用的两种方式(必看)

Sep 18 Javascript

jquery 判断div show的状态实例

Dec 03 Javascript

Vue如何引入远程JS文件

Apr 20 Javascript

微信小程序 wx:for的使用实例详解

Apr 27 Javascript

javascript 取小数点后几位几种方法总结

Aug 02 Javascript

Bootstrap table使用方法记录

Aug 23 Javascript

ui-router中使用ocLazyLoad和resolve的具体方法

Oct 18 Javascript

node.js连接mysql与基本用法示例

Jan 05 Javascript

解决$store.getters调用不执行的问题

Nov 08 Javascript

小程序表单认证布局及验证详解

Jun 19 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模板之Phpbean的目录结构

2008/01/10 PHP

解析:通过php socket并借助telnet实现简单的聊天程序

2013/06/18 PHP

php获取CSS文件中图片地址并下载到本地的方法

2014/12/02 PHP

自写的利用PDO对mysql数据库增删改查操作类

2018/02/19 PHP

WordPress免插件实现面包屑导航的示例代码

2020/08/20 PHP

JS实现判断碰撞的方法

2015/02/11 Javascript

javascript上下方向键控制表格行选中并高亮显示的方法

2015/02/13 Javascript

jQuery实现dialog设置focus焦点的方法

2015/06/10 Javascript

js如何实现点击标签文字，文字在文本框出现

2015/08/05 Javascript

js实现对ajax请求面向对象的封装

2016/01/08 Javascript

基于javascript实现按圆形排列DIV元素(一)

2016/12/02 Javascript

JavaScript原生编写《飞机大战坦克》游戏完整实例

2017/01/04 Javascript

微信小程序支付功能开发错误总结

2017/02/21 Javascript

移动设备手势事件库Touch.js使用详解

2017/08/18 Javascript

angular.js和vue.js中实现函数去抖示例（debounce）

2018/01/18 Javascript

在Vue项目中用fullcalendar制作日程表的示例代码

2019/08/04 Javascript

JS 数组基本用法入门示例解析

2020/01/16 Javascript

[26:52]LGD vs EG 2018国际邀请赛小组赛BO2 第一场 8.17

2018/08/18 DOTA

[01:10:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第一场 3月4日

2021/03/11 DOTA

Python实现图片尺寸缩放脚本

2018/03/10 Python

Python基于最小二乘法实现曲线拟合示例

2018/06/14 Python

详解django中url路由配置及渲染方式

2019/02/25 Python

基于TensorFlow常量、序列以及随机值生成实例

2020/01/04 Python

在Tensorflow中查看权重的实现

2020/01/24 Python

关于jupyter打开之后不能直接跳转到浏览器的解决方式

2020/04/13 Python

UDP协议功能

2013/01/06 面试题

维德科技C#面试题笔试题

2015/12/09 面试题

轻金属冶金专业毕业生自荐信

2013/11/02 职场文书

社区服务标语

2014/07/01 职场文书

低碳日宣传活动总结

2014/07/09 职场文书

有限责任公司股东合作协议书

2014/12/02 职场文书

普宁寺导游词

2015/02/04 职场文书

新郎结婚保证书

2015/02/26 职场文书

golang中实现给gif、png、jpeg图片添加文字水印

2021/04/26 Golang

JavaScript中MutationObServer监听DOM元素详情

2021/11/27 Javascript

MySQL中int (10) 和 int (11) 的区别

2022/01/22 MySQL