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

Ucren Virtual Desktop V2.0

Nov 07 Javascript

jQuery 处理表单元素的代码

Feb 15 Javascript

PhotoShop给图片自动添加边框及EXIF信息的JS脚本

Feb 15 Javascript

Bootstrap Table使用方法详解

Aug 01 Javascript

JavaScript中关于iframe滚动条的去除和保留

Nov 17 Javascript

BootStrap Datetimepicker 汉化的实现代码

Feb 10 Javascript

Vue使用lodop实现打印小结

Jul 06 Javascript

小程序采集录音并上传到后台

Nov 22 Javascript

JS实现旋转木马轮播图

Jan 01 Javascript

js验证密码强度解析

Mar 18 Javascript

vue中使用router全局守卫实现页面拦截的示例

Oct 23 Javascript

Ajax实现异步加载数据

Nov 17 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下删除字符串中HTML标签的函数

2008/08/27 PHP

php继承中方法重载（覆盖）的应用场合

2015/02/09 PHP

PHP水印类,支持添加图片、文字、填充颜色区域的实现

2017/02/04 PHP

无语，javascript居然支持中文(unicode)编程！

2007/04/12 Javascript

用正则表达式动态创建/增加css style script 兼容IE firefox

2009/03/10 Javascript

JavaScript Object的extend是一个常用的功能

2009/12/02 Javascript

javascript getElementsByClassName 和js取地址栏参数

2010/01/02 Javascript

动态显示可输入的字数提示还可以输入的字数

2014/04/01 Javascript

JavaScript计算两个日期时间段内日期的方法

2015/03/16 Javascript

jquery插件star-rating.js实现星级评分特效

2015/04/15 Javascript

Express实现前端后端通信上传图片之存储数据库（mysql）傻瓜式教程（一）

2015/12/10 Javascript

深入理解JavaScript中的对象复制(Object Clone)

2016/05/18 Javascript

AngularJS基础 ng-srcset 指令简单示例

2016/08/03 Javascript

Angular懒加载机制刷新后无法回退的快速解决方法

2016/08/30 Javascript

js编写简单的聊天室功能

2017/08/17 Javascript

vue打包相关细节整理(小结)

2018/09/28 Javascript

[02:05]2014DOTA2西雅图邀请赛老队长全明星大猜想谁不服就按进显示器

2014/07/08 DOTA

Python 匹配任意字符（包括换行符）的正则表达式写法

2009/10/29 Python

python解决pandas处理缺失值为空字符串的问题

2018/04/08 Python

Python3实现的反转单链表算法示例

2019/03/08 Python

python 的 openpyxl模块读取 Excel文件的方法

2019/09/09 Python

Python 用三行代码提取PDF表格数据

2019/10/13 Python

python matplotlib模块基本图形绘制方法小结【直线，曲线，直方图，饼图等】

2020/04/26 Python

浅谈matplotlib默认字体设置探索

2021/02/03 Python

HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题

2021/01/19 HTML / CSS

房地产员工找工作的自我评价

2013/11/15 职场文书

竞选体育委员演讲稿

2014/04/26 职场文书

给公司的建议书范文

2014/05/13 职场文书

公司承诺书怎么写

2014/05/24 职场文书

2014年度个人工作总结

2014/11/07 职场文书

红旗渠导游词

2015/02/09 职场文书

2015年度酒店客房部工作总结

2015/05/25 职场文书

课程设计感想范文

2015/08/11 职场文书

判断Python中的Nonetype类型

2021/05/25 Python

Mysql 如何实现多张无关联表查询数据并分页

2021/06/05 MySQL

vscode中使用npm安装babel的方法

2021/08/02 Javascript