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实现字体背景跑马灯

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实现字体背景跑马灯

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 的应用开发初探(mootools)
Dec 19 Javascript
Jquery数独游戏解析(一)-页面布局
Nov 05 Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
Aug 13 Javascript
jQuery Validate 验证,校验规则写在控件中的具体实例
Feb 27 Javascript
AngularJS 如何在控制台进行错误调试
Jun 07 Javascript
微信小程序开发经验总结(推荐)
Jan 11 Javascript
JS实现图片放大缩小的方法
Feb 15 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
Apr 11 Javascript
Vue.js递归组件构建树形菜单
Dec 24 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
Apr 29 Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
Oct 09 Javascript
详细聊聊浏览器是如何看闭包的
Nov 11 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数组的一些常见操作汇总
2011/07/17 PHP
php excel reader读取excel内容存入数据库实现代码
2012/12/06 PHP
一些php项目中比较通用的php自建函数的详解
2013/06/06 PHP
jquery 得到当前页面高度和宽度的两个函数
2010/02/21 Javascript
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
2010/03/31 Javascript
基于jquery的tab切换 js原理
2010/04/01 Javascript
js自定义方法通过隐藏iframe实现文件下载
2013/02/21 Javascript
javascript中的parseInt和parseFloat区别
2013/07/12 Javascript
jquery实现通用版鼠标经过淡入淡出效果
2014/06/15 Javascript
jquery动态分页效果堪比时光网
2014/09/25 Javascript
JavaScript原生对象之String对象的属性和方法详解
2015/03/13 Javascript
JavaScript替换当前页面的方法
2015/04/03 Javascript
浅析JavaScript访问对象属性和方法及区别
2015/11/16 Javascript
Bootstrap源码解读导航(6)
2016/12/23 Javascript
微信小程序之网络请求简单封装实例详解
2017/06/28 Javascript
vue封装一个简单的div框选时间的组件的方法
2019/01/06 Javascript
可能被忽略的一些JavaScript数组方法细节
2019/02/28 Javascript
vue基础之data存储数据及v-for循环用法示例
2019/03/08 Javascript
jQuery实现消息弹出框效果
2019/12/10 jQuery
js实现圆形显示鼠标单击位置
2020/02/11 Javascript
[03:42]2014DOTA2西雅图国际邀请赛 Navi战队巡礼
2014/07/07 DOTA
用python分割TXT文件成4K的TXT文件
2009/05/23 Python
python检测是文件还是目录的方法
2015/07/03 Python
Python面向对象编程基础解析(二)
2017/10/26 Python
Python线性回归实战分析
2018/02/01 Python
Python----数据预处理代码实例
2019/03/20 Python
python实现批量视频分帧、保存视频帧
2019/05/31 Python
python通过实例讲解反射机制
2019/10/17 Python
Python使用Opencv实现图像特征检测与匹配的方法
2019/10/30 Python
King Apparel官网:英国街头服饰品牌
2019/09/05 全球购物
销售人员中英文自荐信
2013/09/22 职场文书
社区先进事迹材料
2014/05/19 职场文书
舞蹈教育学专业自荐信
2014/06/15 职场文书
在职证明书模板
2015/06/15 职场文书
小学四年级班主任工作经验交流材料
2015/11/02 职场文书
ECharts transform数据转换和dataZoom在项目中使用
2022/12/24 Javascript