当前位置 主页 > 网站技术 > 代码类 >

    JS实现字体背景跑马灯

    栏目:代码类 时间:2020-01-06 21:08

    本文实例为大家分享了JS实现字体背景跑马灯的具体代码,供大家参考,具体内容如下

    知识点

    1.通过 @keyframes 规则,创建动画。
    2.背景作用域:

    background-clip: text;
    -webkit-background-clip: text;

    3.background-position定位背景图像
    4.color: transparent 全透明

    运行效果

    代码

    <!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>

    所使用的背景图片

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持IIS7站长之家。