JS實(shí)現(xiàn)字體背景跑馬燈

更新時(shí)間：2020年01月06日 16:39:18 作者：KaiSarH

這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)字體背景跑馬燈，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JS實(shí)現(xiàn)字體背景跑馬燈的具體代碼，供大家參考，具體內(nèi)容如下

知識(shí)點(diǎn)

1.通過 @keyframes 規(guī)則，創(chuàng)建動(dòng)畫。
2.背景作用域：

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

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

運(yùn)行效果

代碼

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

所使用的背景圖片

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

js
跑馬燈

相關(guān)文章

JavaScript中工廠函數(shù)與構(gòu)造函數(shù)示例詳解
這篇文章主要給大家介紹了關(guān)于JavaScript中工廠函數(shù)與構(gòu)造函數(shù)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
JS?中在嚴(yán)格模式下?this?的指向問題
這篇文章主要介紹了JS?中在嚴(yán)格模式下this的指向問題，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2022-09-09
單擊按鈕顯示隱藏子菜單經(jīng)典案例
單擊按鈕實(shí)現(xiàn)顯示隱藏子菜單很經(jīng)典的一個(gè)案例，接下來為您呈現(xiàn)代碼，需要了解的朋友可以參考下
2013-01-01
JS代碼格式化和語(yǔ)法著色V2
JS代碼格式化和語(yǔ)法著色V2...
2006-10-10
JavaScript實(shí)現(xiàn)顏色查看器
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)顏色查看器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-04-04
基于JS實(shí)現(xiàn)任務(wù)隊(duì)列的示例代碼
顧名思義,任務(wù)隊(duì)列就是存放任務(wù)的隊(duì)列,隊(duì)列中的任務(wù)都嚴(yán)格按照進(jìn)入隊(duì)列的先后順序執(zhí)行,所以下面我們就來看看如何基于JS實(shí)現(xiàn)任務(wù)隊(duì)列吧
2023-08-08
用jquery.sortElements實(shí)現(xiàn)table排序
實(shí)現(xiàn)table排序，網(wǎng)上有很多解決方案，很多都基于jQuery，最后我選擇用sortElements，實(shí)現(xiàn)很簡(jiǎn)單
2014-05-05
js回溯法計(jì)算最佳旅行線路代碼實(shí)例
這篇文章主要介紹了js回溯法計(jì)算最佳旅行線路代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-09-09
星期幾的不同腳本寫法(推薦)
下面小編就為大家?guī)硪黄瞧趲椎牟煌_本寫法(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-06-06
JS傳參及動(dòng)態(tài)修改頁(yè)面布局
本篇文章主要介紹了JS傳參及動(dòng)態(tài)修改頁(yè)面布局的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來看下吧
2017-04-04