在網頁的合適位置,放一些帶有跑馬燈特效的文字肯定會吸引訪客的眼球的。今天這篇博文就寫一寫利用純CSS來實現網頁中文字跑馬燈特效的案例。

国产视频app在CSS3出現以前,如果要制作一段流光文字必須借助圖片,但現在我們直接可以利用CSS代碼來實現了,省時又少力,還能加快前端網頁的加載速,省資源啊。

先看效果圖:

CSS html文字的跑馬燈(流光)特效

CSS3實現文字跑馬燈(流光)效果

HTML代碼

<div>
    <p>
        飛鳥慕魚博客:http://xswdd.cn
    </p>
</div>

CSS代碼

<style type="text/css">
    body {
        margin: 0;
        padding: 0;
        background-color: #2f2424;
    }
    div {
        margin: 400px auto;
        font-size: 40px;
        text-align: center;
    }
    p {
        margin: 0;
        background: -webkit-linear-gradient(left,
            #ffffff,
            #ff0000 6.25%,
            #ff7d00 12.5%,
            #ffff00 18.75%,
            #00ff00 25%,
            #00ffff 31.25%,
            #0000ff 37.5%,
            #ff00ff 43.75%,
            #ffff00 50%,
            #ff0000 56.25%,
            #ff7d00 62.5%,
            #ffff00 68.75%,
            #00ff00 75%,
            #00ffff 81.25%,
            #0000ff 87.5%,
            #ff00ff 93.75%,
            #ffff00 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-size: 200% 100%;
        animation: masked-animation 2s infinite linear;
    }
    @keyframes masked-animation {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: -100%, 0;
        }
    }
</style>

代碼實現原理:

以上代碼中,使用了CSS中的 animation 屬性linear-gradient()函數,以及 @keyframes 規則來實現的

1、animation 屬性

animation:是CSS3中新增的屬性,它可以制作出多種酷炫的動畫效果,如果對flash有一定的了解,那這個屬性就會很容易學習。

2、@keyframes 規則。

@keyframes:能夠將一套 CSS 樣式逐漸變化為另一套樣式,來實現動畫的效果。

国产视频app0% 是動畫的開始時間,100% 動畫的結束時間。

3、linear-gradient() 函數

国产视频applinear-gradient() 函數用于創建一個線性漸變的 "圖像"。

CSS 跑馬燈(流光)字體特效代碼示例平臺 : 所有平臺  |  分類 : 編程開發  |  大小 : 0.1 MB