怎么用css實(shí)現(xiàn)滾動(dòng)文字

這篇文章主要介紹了怎么用css實(shí)現(xiàn)滾動(dòng)文字，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

讓客戶(hù)滿(mǎn)意是我們工作的目標(biāo)，不斷超越客戶(hù)的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶(hù)，將通過(guò)不懈努力成為客戶(hù)在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名注冊(cè)、虛擬主機(jī)、營(yíng)銷(xiāo)軟件、網(wǎng)站建設(shè)、管城網(wǎng)站維護(hù)、網(wǎng)站推廣。

代碼

html

<div>

例子：

<divclass="box">

<spanclass="box-text">滾動(dòng)的文字，我是滾動(dòng)的文字</span>

</div>

CSS

.box{

height:auto;

background-color:blue;

}

.box-text{

color:white;

background:-ms-gradient(linear,lefttop,righttop,color-stop(0,#4d4d4d),color-stop(.4,#4d4d4d),color-stop(.5,#fff),color-stop(.6,#4d4d4d),color-stop(1,#4d4d4d));

background:-webkit-gradient(linear,lefttop,righttop,color-stop(0,#4d4d4d),color-stop(.4,#4d4d4d),color-stop(.5,#fff),color-stop(.6,#4d4d4d),color-stop(1,#4d4d4d));

background-clip:text;

-webkit-text-fill-color:transparent;

animation:slidetounlock3sinfinite;

-webkit-animation:slidetounlock3sinfinite;

}

@-webkit-keyframesslidetounlock{

0%{

background-position:-200px0

}

100%{

background-position:200px0

}

實(shí)現(xiàn)原理

1、動(dòng)畫(huà)效果

@-webkit-keyframes

定義一組動(dòng)畫(huà)，在本動(dòng)畫(huà)中，將背景的位置進(jìn)行了改變（注意是文本的位置）

2、背景為何選擇到文本而不是整塊背景？

background-clip:text;

作用：指定繪圖區(qū)的背景

除了text外，還包括：border-box|padding-box|content-box;三個(gè)屬性

3、怎么實(shí)現(xiàn)一小段的變化效果的呢？

gradient()

作用：漸變

從實(shí)際效果中看到，白色部分之外都是灰色，越是靠近白色，就越白。

-ms-gradient(linear,lefttop,righttop,color-stop(0,#4d4d4d),color-stop(.4,#4d4d4d),color-stop(.5,#fff),color-stop(.6,#4d4d4d),color-stop(1,#4d4d4d));

說(shuō)明：漸變類(lèi)型，線性漸變（z=x*y）

toleft：

設(shè)置漸變?yōu)閺挠业阶?。相?dāng)于:270deg

toright：

設(shè)置漸變從左到右。相當(dāng)于:90deg

totop：

設(shè)置漸變從下到上。相當(dāng)于:0deg

tobottom：

設(shè)置漸變從上到下。相當(dāng)于:180deg。這是默認(rèn)值，等同于留空不寫(xiě)。

這樣就實(shí)現(xiàn)了漸變字體部分

-webkit-text-fill-color:transparent;

字體填充顏色：繼承與背景，所以字體顏色為設(shè)置的box-text的background,而非box的背景顏色。

就這樣加上一個(gè)動(dòng)畫(huà)，循環(huán)移動(dòng)，就是實(shí)現(xiàn)了。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“怎么用css實(shí)現(xiàn)滾動(dòng)文字”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

當(dāng)前文章：怎么用css實(shí)現(xiàn)滾動(dòng)文字
標(biāo)題網(wǎng)址：http://www.muchs.cn/article8/gdgdop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶(hù)體驗(yàn)、網(wǎng)站改版、手機(jī)網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作、網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容