怎么用css實現滾動文字

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

    代碼

    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

    }

    }

    實現原理

    1、動畫效果

    @-webkit-keyframes

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

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

    background-clip:text;

    作用：指定繪圖區的背景

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

    3、怎么實現一小段的變化效果的呢？

    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：

    設置漸變為從右到左。相當于:270deg

    toright：

    設置漸變從左到右。相當于:90deg

    totop：

    設置漸變從下到上。相當于:0deg

    tobottom：

    設置漸變從上到下。相當于:180deg。這是默認值，等同于留空不寫。

    這樣就實現了漸變字體部分

    -webkit-text-fill-color:transparent;

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

    就這樣加上一個動畫，循環移動，就是實現了。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“怎么用css實現滾動文字”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!