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.通過(guò) @keyframes 規(guī)則，創(chuàng)建動(dòng)畫(huà)。
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">歡迎到來(lái)</h1>
</div>
</body>
</html>
所使用的背景圖片
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript中工廠函數(shù)與構(gòu)造函數(shù)示例詳解
這篇文章主要給大家介紹了關(guān)于JavaScript中工廠函數(shù)與構(gòu)造函數(shù)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
JS?中在嚴(yán)格模式下?this?的指向問(wèn)題
這篇文章主要介紹了JS?中在嚴(yán)格模式下this的指向問(wèn)題，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-09-09
單擊按鈕實(shí)現(xiàn)顯示隱藏子菜單很經(jīng)典的一個(gè)案例，接下來(lái)為您呈現(xiàn)代碼，需要了解的朋友可以參考下2013-01-01
JS代碼格式化和語(yǔ)法著色V2...2006-10-10
這篇文章主要為大家詳細(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í)行,所以下面我們就來(lái)看看如何基于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ì)算最佳旅行線(xiàn)路代碼實(shí)例
這篇文章主要介紹了js回溯法計(jì)算最佳旅行線(xiàn)路代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
下面小編就為大家?guī)?lái)一篇星期幾的不同腳本寫(xiě)法(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
本篇文章主要介紹了JS傳參及動(dòng)態(tài)修改頁(yè)面布局的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-04-04