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

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

    代碼

    html

    <div>

    例子：

    <divclass="box">

    <spanclass="box-text">滾動的文字，我是滾動的文字</span>

    </div>

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

    }

    }

    實現(xiàn)原理

    1、動畫效果

    @-webkit-keyframes

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

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

    background-clip:text;

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

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

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

    gradient()

    作用：漸變

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

    -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));

    說明：漸變類型，線性漸變（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àn)了漸變字體部分

    -webkit-text-fill-color:transparent;

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

    就這樣加上一個動畫，循環(huán)移動，就是實現(xiàn)了。

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

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

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

廣告

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