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

Display SQL Server Version Information

Jun 21 Javascript

JavaScript Accessor实现说明

Dec 06 Javascript

js实现Select列表各项上移和下移的方法

Aug 14 Javascript

老生常谈JQuery data方法的使用

Sep 09 Javascript

jquery仿微信聊天界面

May 06 jQuery

基于casperjs和resemble.js实现一个像素对比服务详解

Jan 10 Javascript

解决使用Vue.js显示数据的时,页面闪现原始代码的问题

Feb 11 Javascript

Vue组件教程之Toast(Vue.extend 方式)详解

Jan 27 Javascript

解决vue单页面修改样式无法覆盖问题

Aug 05 Javascript

Vue 中获取当前时间并实时刷新的实现代码

May 12 Javascript

vue项目,代码提交至码云,iconfont的用法说明

Jul 30 Javascript

交互式可视化js库gojs使用介绍及技巧

Feb 18 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

从MySQL数据库表中取出随机数据的代码

2007/09/05 PHP

php实现通用的从数据库表读取数据到数组的函数实例

2015/03/21 PHP

php编程每天必学之验证码

2016/03/03 PHP

php文件上传类的分享

2017/07/06 PHP

PHP回调函数概念与用法实例分析

2017/11/03 PHP

PHP性能分析工具xhprof的安装使用与注意事项

2017/12/19 PHP

SWFObject 2.1以上版本语法介绍

2010/07/10 Javascript

nodejs读取memcache示例分享

2014/01/02 NodeJs

sails框架的学习指南

2014/12/22 Javascript

详解Bootstrap的aria-label和aria-labelledby应用

2016/01/04 Javascript

基于js对象,操作属性、方法详解

2016/08/11 Javascript

AngularJs Modules详解及示例代码

2016/09/01 Javascript

关于Jquery中的事件绑定总结

2016/10/26 Javascript

基于Vuejs框架实现翻页组件

2020/06/29 Javascript

微信小程序弹幕功能简单实例

2017/02/14 Javascript

浅谈vue首屏加载优化

2018/06/28 Javascript

JavaScript封装的常用工具类库bee.js用法详解【经典类库】

2018/09/03 Javascript

利用Vue构造器创建Form组件的通用解决方法

2018/12/03 Javascript

vue实现密码显示与隐藏按钮的自定义组件功能

2019/04/23 Javascript

JavaScript Math对象和调试程序的方法分析

2019/05/13 Javascript

详解一次Vue低版本安卓白屏问题的解决过程

2019/05/30 Javascript

layer.msg()去掉默认时间,实现手动关闭的方法

2019/09/12 Javascript

[03:58]兄弟们，回来开黑了！DOTA2昔日战友招募宣传视频

2016/07/17 DOTA

[03:59]第二届DOTA2亚洲邀请赛选手传记-VGJ.rOtk

2017/04/03 DOTA

老生常谈python函数参数的区别(必看篇)

2017/05/29 Python

Python实现的手机号归属地相关信息查询功能示例

2017/06/08 Python

程序员写Python时的5个坏习惯，你有几条？

2018/11/26 Python

详解Python logging调用Logger.info方法的处理过程

2019/02/12 Python

Pycharm新建模板默认添加个人信息的实例

2019/07/15 Python

利用python3 的pygame模块实现塔防游戏

2019/12/30 Python

python使用openpyxl操作excel的方法步骤

2020/05/28 Python

详解python的xlwings库读写excel操作总结

2021/02/26 Python

物理力学求职信

2014/02/18 职场文书

vue响应式原理与双向数据的深入解析

2021/06/04 Vue.js

Java 中的 Unsafe 魔法类的作用大全

2021/06/26 Java/Android

Win11任务栏无法正常显示资源管理器不停重启的解决方法

2022/07/07 数码科技