首頁  >  文章  >  web前端  >  怎麼純用css程式碼讓文字展示閃爍效果? (程式碼範例)

怎麼純用css程式碼讓文字展示閃爍效果? (程式碼範例)

藏色散人
藏色散人原創
2018-08-10 10:04:0111539瀏覽

在網頁中,通常設計師們為了凸顯自己的產品主題,總是會讓文字或加點特效,例如使文字不停的閃動,或有規律的變色。以便達到吸引人關注的目的。那麼除了用ps製作的gif動畫外,還有哪些方法可以實現這樣的功能特效呢?對於略懂程式碼的朋友來說,我們都知道css中文字體樣式是有很多種的,例如傾斜、加粗等等。那麼這裡就來跟大家介紹一下,如何用css程式碼做出文字閃爍效果,本篇有兩種閃動方式可供大家參考。

一、css字體閃爍(波浪閃爍)具體範例程式碼如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>纯css代码测试文字闪动效果</title>
    <style>
        body{
            background: #000;
        }
        h1.fb-glitch {
            position: relative;
            color: #abff79;
        }
        h1.fb-glitch:before {
            left: -2px;
            text-shadow: 2px 0 #0b391a;
            animation: glitch-anim-2 3s infinite linear alternate-reverse;
        }
        h1.fb-glitch:before, h1.fb-glitch:after {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            clip: rect(0, 0, 0, 0);
        }
        h1.fb-glitch:after {
            left: 2px;
            text-shadow: -1px 0 #1b5c16;
            animation: glitch-anim-1 2s infinite linear alternate-reverse;
        }
        @keyframes glitch-anim-1 {
            0% {
                clip: rect(82px, 820px, 98px, 0); }
            5.8823529412% {
                clip: rect(17px, 820px, 4px, 0); }
            11.7647058824% {
                clip: rect(24px, 820px, 44px, 0); }
            17.6470588235% {
                clip: rect(24px, 820px, 111px, 0); }
            23.5294117647% {
                clip: rect(29px, 820px, 45px, 0); }
            29.4117647059% {
                clip: rect(114px, 820px, 115px, 0); }
            35.2941176471% {
                clip: rect(103px, 820px, 22px, 0); }
            41.1764705882% {
                clip: rect(49px, 820px, 32px, 0); }
            47.0588235294% {
                clip: rect(2px, 820px, 10px, 0); }
            52.9411764706% {
                clip: rect(80px, 820px, 44px, 0); }
            58.8235294118% {
                clip: rect(70px, 820px, 30px, 0); }
            64.7058823529% {
                clip: rect(27px, 820px, 79px, 0); }
            70.5882352941% {
                clip: rect(82px, 820px, 112px, 0); }
            76.4705882353% {
                clip: rect(27px, 820px, 2px, 0); }
            82.3529411765% {
                clip: rect(47px, 820px, 104px, 0); }
            88.2352941176% {
                clip: rect(53px, 820px, 102px, 0); }
            94.1176470588% {
                clip: rect(2px, 820px, 90px, 0); }
            100% {
                clip: rect(88px, 820px, 56px, 0); } }

        @keyframes glitch-anim-2 {
            0% {
                clip: rect(88px, 820px, 68px, 0); }
            5.8823529412% {
                clip: rect(75px, 820px, 113px, 0); }
            11.7647058824% {
                clip: rect(80px, 820px, 40px, 0); }
            17.6470588235% {
                clip: rect(70px, 820px, 51px, 0); }
            23.5294117647% {
                clip: rect(47px, 820px, 78px, 0); }
            29.4117647059% {
                clip: rect(61px, 820px, 7px, 0); }
            35.2941176471% {
                clip: rect(94px, 820px, 1px, 0); }
            41.1764705882% {
                clip: rect(26px, 820px, 69px, 0); }
            47.0588235294% {
                clip: rect(91px, 820px, 62px, 0); }
            52.9411764706% {
                clip: rect(8px, 820px, 78px, 0); }
            58.8235294118% {
                clip: rect(17px, 820px, 97px, 0); }
            64.7058823529% {
                clip: rect(66px, 820px, 48px, 0); }
            70.5882352941% {
                clip: rect(66px, 820px, 85px, 0); }
            76.4705882353% {
                clip: rect(46px, 820px, 12px, 0); }
            82.3529411765% {
                clip: rect(69px, 820px, 68px, 0); }
            88.2352941176% {
                clip: rect(38px, 820px, 7px, 0); }
            94.1176470588% {
                clip: rect(83px, 820px, 32px, 0); }
            100% {
                clip: rect(110px, 820px, 95px, 0); } }
    </style>
</head>
<body>
<h1 class="fb-glitch" data-text="文字闪动效果">文字闪动效果</h1>
</body>
</html>

以上程式碼可直接複製在本地測試,測試效果如下截圖:

怎麼純用css程式碼讓文字展示閃爍效果? (程式碼範例)

怎麼純用css程式碼讓文字展示閃爍效果? (程式碼範例)

#二、css字體閃爍(漸變閃爍)具體範例程式碼如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css代码闪动效果测试</title>
</head>
<body>
<div class="main">
    文字闪动测试:<span class="blink">文字闪动效果</span>
</div>

<style type="text/css">
    .main{
        color: #666;margin-top: 50px;
    }
 @keyframes blink{
        0%{opacity: 1;}
        100%{opacity: 0;}
    }
 @-webkit-keyframes blink {
        0% { opacity: 1; }
        100% { opacity: 0; }
    }
    @-moz-keyframes blink {
        0% { opacity: 1; }
        100% { opacity: 0; }
    }
    @-ms-keyframes blink {
        0% {opacity: 1; }
        100% { opacity: 0;}
    }
    @-o-keyframes blink {
        0% { opacity: 1; }
        100% { opacity: 0; }
    }
   
 .blink{
        color: #dd4814;
        animation: blink 1s linear infinite;
 -webkit-animation: blink 1s linear infinite;
        -moz-animation: blink 1s linear infinite;
        -ms-animation: blink 1s linear infinite;
        -o-animation: blink 1s linear infinite;
    }
</style>
</body>
</html>

以上程式碼可直接複製在本機測試,測試效果如下截圖:

怎麼純用css程式碼讓文字展示閃爍效果? (程式碼範例)

註:第二種漸層方法主要想法是透過改變透明度來實現文字的漸變閃爍

@keyframes blink{}  定義keyframe動畫,命名為blink 。

@-webkit-keyframes blink   新增相容性前綴 

 .blink{}定義blink類別

 -webkit-animation:;-moz-animation: ; -ms-animation: -o-animation: ; 其它瀏覽器相容性前綴 

這篇文章介紹了兩種文字閃爍特效方法,希望對有需要的朋友有所幫助。

【相關內容推薦】

利用html實作文字閃爍的效果程式碼

酷文字跳動漂浮js特效程式碼

CSS3實作立體文字動態文字特效

#一個網頁標題title的閃爍提示效果實現想法_javascript技巧

#利用純CSS實作動態的文字效果實例





#

以上是怎麼純用css程式碼讓文字展示閃爍效果? (程式碼範例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn