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

编写兼容IE和FireFox的脚本

May 18 Javascript

关于COOKIE个数与大小的问题

Jan 17 Javascript

jQuery autocomplate 自扩展插件、自动完成示例代码

Mar 28 Javascript

javascript中不等于的代码是什么怎么写

Dec 29 Javascript

jQuery实现鼠标滑过点击事件音效试听

Aug 31 Javascript

原生js和jquery分别实现横向导航菜单效果

May 13 Javascript

jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】

Sep 21 Javascript

Bootstrap导航条可点击和鼠标悬停显示下拉菜单

Nov 25 Javascript

Boostrap栅格系统与自己额外定义的媒体查询的冲突问题

Feb 19 Javascript

详解ES6之用let声明变量以及let loop机制

Jul 15 Javascript

AngularJS 前台分页实现的示例代码

Jun 07 Javascript

vue 避免变量赋值后双向绑定的操作

Nov 07 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 addslashes和mysql_real_escape_string

2010/01/24 PHP

浅析get与post的一些特殊情况

2014/07/28 PHP

php采用curl模仿登录人人网发布动态的方法

2014/11/07 PHP

PHP之sprintf函数用法详解

2014/11/12 PHP

PHP中new static() 和 new self() 的区别介绍

2015/01/09 PHP

laravel框架中表单请求类型和CSRF防护实例分析

2019/11/23 PHP

JQery 渐变图片导航效果代码漂亮

2010/01/01 Javascript

JQuery学习笔录简单的JQuery

2012/04/09 Javascript

Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

2013/11/14 Javascript

js中利用tagname和id获取元素的方法

2016/01/03 Javascript

js滑动提示效果代码分享

2016/03/10 Javascript

jQuery将表单序列化成一个Object对象的实例

2016/11/29 Javascript

纯js实现悬浮按钮组件

2016/12/17 Javascript

玩转Koa之koa-router原理解析

2018/12/29 Javascript

微信自定义分享链接信息（标题，图片和内容）实现过程详解

2019/09/04 Javascript

js前端如何写一个精确的倒计时代码

2019/10/25 Javascript

JS+Canvas实现五子棋游戏

2020/08/26 Javascript

elementUI同一页面展示多个Dialog的实现

2020/11/19 Javascript

NodeJS和浏览器中this关键字的不同之处

2021/03/03 NodeJs

[55:03]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.20

2020/11/20 DOTA

python基于右递归解决八皇后问题的方法

2015/05/25 Python

Python并发编程协程(Coroutine)之Gevent详解

2017/12/27 Python

安装python3的时候就是输入python3死活没有反应的解决方法

2018/01/24 Python

Python操作MySQL数据库的方法

2018/06/20 Python

树莓派使用USB摄像头和motion实现监控

2019/06/22 Python

简单了解Django ContentType内置组件

2019/07/23 Python

Pytoch之torchvision.transforms图像变换实例

2019/12/30 Python

通过Python扫描代码关键字并进行预警的实现方法

2020/05/24 Python

Python 程序员必须掌握的日志记录

2020/08/17 Python

python使用Windows的wmic命令监控文件运行状况,如有异常发送邮件报警

2021/01/30 Python

墨西哥巴士车票在线购买：ClickBus

2018/03/27 全球购物

Vans(范斯)新西兰官方网站：美国原创极限运动品牌

2020/09/19 全球购物

小溪流的歌教学反思

2014/02/13 职场文书

企业挂职心得体会

2014/09/10 职场文书

2015年幼儿园国庆节活动总结

2015/07/30 职场文书

小学二年级语文教学反思

2016/03/03 职场文书