简化版 分站 地图 日历 影视
计算器 行情 加解密 长度 面积
首页 软件 编程 笑话 知识 公告 注册 登录 用QQ登录本站
  •  
    您现在的位置:首页 >> JS >> 内容

    JS实现字体背景跑马灯

    内容摘要:!DOCTYPE htmlhtml lang='en'head meta charset='UTF-8' titleTitle/title stylediv{ text-align: center; background-color: black; padding: 10px 0;}.animated { font-family: 华文行楷, cursive......

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


      版权声明:本内容来源于互联网,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。


    发布日期:2020/1/7 发布时间:15:30:19 点击:1555 
  • 上一篇:JS实现秒杀倒计时特效
  • 下一篇:JS实现音乐钢琴特效
  • 本类新增
    本类热门文章
    Baidu
    壹 家 软 件 工 作 室(YiJia SoftWare Workroom) 齐天大圣® 制 作 ©2000-2020

    本空间由景安网络提供,百度云加速提供加速防护
    YiJiaCMS V3.31 Build 20.6.5(MSSQL) 闽ICP备05000814号-1