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小框架 fly javascript framework
Nov 26 Javascript
最新的10款jQuery内容滑块插件分享
Sep 18 Javascript
JavaScript在多浏览器下for循环的使用方法
Nov 07 Javascript
JQuery AJAX 中文乱码问题解决
Jun 05 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
Jul 10 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
Sep 25 Javascript
JS实现不使用图片仿Windows右键菜单效果代码
Oct 22 Javascript
分分钟玩转Vue.js组件(二)
Mar 01 Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
Apr 19 Javascript
基于vue2.0实现的级联选择器
Jun 09 Javascript
vue ssr 实现方式(学习笔记)
Jan 18 Javascript
详解JQuery基础动画操作
Apr 12 jQuery
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
很温暖很温暖的Lester Young
2021/03/03 冲泡冲煮
PHP以及MYSQL日期比较方法
2012/11/29 PHP
详解WordPress中的头像缓存和代理中的缓存更新方法
2016/03/01 PHP
PHP小白必须要知道的php基础知识(超实用)
2017/10/10 PHP
Laravel监听数据库访问,打印SQL的例子
2019/10/24 PHP
ExtJS 工具栏 分页事件参数
2010/03/05 Javascript
Javascript面向对象编程(三) 非构造函数的继承
2011/08/28 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
2011/09/05 Javascript
jquery实现加载等待效果示例
2013/09/25 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
2014/01/02 Javascript
七个不允许错过的jQuery小技巧
2015/12/21 Javascript
javascript+HTML5自定义元素播放焦点图动画
2016/02/21 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
2016/09/24 Javascript
基于jQuery实现照片墙自动播放特效
2017/01/12 Javascript
js定时器+简单的动画效果实例
2017/11/10 Javascript
vue-rx的初步使用教程
2018/09/21 Javascript
使用JavaScript破解web
2018/09/28 Javascript
js纯前端实现腾讯cos文件上传功能的示例代码
2019/05/14 Javascript
在VUE中实现文件下载并判断状态的方法
2019/11/08 Javascript
js实现简单的贪吃蛇游戏
2020/04/23 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
2020/06/11 Javascript
在Python中操作文件之seek()方法的使用教程
2015/05/24 Python
python 爬虫基本使用——统计杭电oj题目正确率并排序
2020/10/26 Python
Python eval函数介绍及用法
2020/11/09 Python
英国在线房屋中介网站:Yopa
2018/01/09 全球购物
阿根廷票务网站:StubHub阿根廷
2018/04/13 全球购物
土耳其风格手工珠宝:Ottoman Hands
2019/07/26 全球购物
大学生军训自我鉴定
2014/02/12 职场文书
3.15国际消费者权益日主题活动活动总结
2014/03/16 职场文书
经济管理自荐书
2014/06/09 职场文书
2014市国税局对照检查材料思想汇报
2014/09/23 职场文书
学术会议领导致辞
2015/07/29 职场文书
2016领导干部廉洁从政心得体会
2016/01/19 职场文书
导游词之云南丽江-泸沽湖
2019/09/26 职场文书
Nginx域名转发https访问的实现
2021/03/31 Servers
基于Python实现nc批量转tif格式
2022/08/14 Python