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 相关文章推荐
jquery $.trim()方法使用介绍
May 21 Javascript
在Linux上用forever实现Node.js项目自启动
Jul 09 Javascript
使用jQuery实现星级评分代码分享
Dec 09 Javascript
2种jQuery 实现刮刮卡效果
Feb 01 Javascript
JS限制文本框只能输入数字和字母方法
Feb 28 Javascript
微信小程序 仿美团分类菜单 swiper分类菜单
Apr 12 Javascript
微信小程序图片选择区域裁剪实现方法
Dec 02 Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
Apr 24 Javascript
vue.js层叠轮播效果的实例代码
Nov 08 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
Nov 28 Javascript
微信公众号H5支付接口调用方法
Jan 10 Javascript
js实现提交前对列表数据的增删改查
Jan 16 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
全文搜索和替换
2006/10/09 PHP
11个PHP 分页脚本推荐
2011/08/15 PHP
JavaScript 组件之旅(二)编码实现和算法
2009/10/28 Javascript
Javascript 通过json自动生成Dom的代码
2010/04/01 Javascript
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
2013/06/26 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
2014/06/29 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
2016/07/27 Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
2016/10/14 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
2016/11/04 Javascript
Vue.js鼠标悬浮更换图片功能
2017/05/17 Javascript
javascript 开发之网页兼容各种浏览器
2017/09/28 Javascript
初学者AngularJS的环境搭建过程
2017/10/27 Javascript
axios post提交formdata的实例
2018/03/16 Javascript
JavaScript实现简单动态进度条效果
2018/04/06 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
2018/04/22 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
2019/04/11 Javascript
基于JS实现table导出Excel并保留样式
2020/05/19 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
2020/11/04 Javascript
python 文件与目录操作
2008/12/24 Python
python检查序列seq是否含有aset中项的方法
2015/06/30 Python
Python只用40行代码编写的计算器实例
2017/05/10 Python
完美解决python中ndarray 默认用科学计数法显示的问题
2018/07/14 Python
numpy.where() 用法详解
2019/05/27 Python
Python 安装第三方库 pip install 安装慢安装不上的解决办法
2019/06/18 Python
python-django中的APPEND_SLASH实现方法
2019/06/21 Python
使用tensorflow DataSet实现高效加载变长文本输入
2020/01/20 Python
html5使用Canvas绘图的使用方法
2017/11/21 HTML / CSS
深入浅析HTML5中的SVG
2015/11/27 HTML / CSS
荟萃全球保健品:维他购
2018/05/09 全球购物
法国隐形眼镜网站:VisionDirect.fr
2020/03/03 全球购物
学生爱国演讲稿
2014/01/14 职场文书
上课随便讲话检讨书
2014/09/12 职场文书
法院授权委托书格式
2014/09/28 职场文书
教师节老师寄语
2015/05/28 职场文书
雄兵连:第三季先行图公开,天使恶魔联合,银河之力的新力量
2021/06/11 国漫
Python-OpenCV教程之图像的位运算详解
2021/06/21 Python