用css代碼使文字實(shí)現(xiàn)閃動(dòng)效果的代碼實(shí)例教程

2024-07-11 08:40:52

字體：大中小

供稿：網(wǎng)友

在網(wǎng)頁(yè)中，通常設(shè)計(jì)師們?yōu)榱送癸@自己的產(chǎn)品主題，總會(huì)讓文字或者加點(diǎn)特效，比如使文字不停的閃動(dòng)，或有規(guī)律的變色

本站收錄這篇文章用css代碼使文字實(shí)現(xiàn)閃動(dòng)效果的代碼實(shí)例教程，詳細(xì)解說(shuō)文章中相關(guān)文字閃動(dòng) 技術(shù)與知識(shí)，歡迎能給大家一些在這方面的支持和幫助！下面是詳細(xì)內(nèi)容：

在網(wǎng)頁(yè)中，通常設(shè)計(jì)師們?yōu)榱送癸@自己的產(chǎn)品主題，總會(huì)讓文字或者加點(diǎn)特效，比如使文字不停的閃動(dòng)，或有規(guī)律的變色。以便達(dá)到吸引人關(guān)注的目的。那么除了用ps制作的gif動(dòng)畫(huà)外，還有哪些方法可以實(shí)現(xiàn)這樣的功能特效呢？對(duì)于略懂代碼的朋友們來(lái)說(shuō)，我們都知道css中文字體樣式是有很多種的，例如傾斜、加粗等等。那么這里就給大家介紹一下，如何用css代碼做出文字閃動(dòng)效果，本篇有兩種閃動(dòng)方式可供大家參考。

一、css字體閃動(dòng)（波浪閃動(dòng)）具體示例代碼如下：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>純css代碼測(cè)試文字閃動(dòng)效果</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="文字閃動(dòng)效果">文字閃動(dòng)效果</h1></body></html>

以上代碼可直接復(fù)制在本地測(cè)試，測(cè)試效果如下截圖：

二、css字體閃動(dòng)（漸變閃動(dòng)）具體示例代碼如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>css代碼閃動(dòng)效果測(cè)試</title></head><body><div class="main">    文字閃動(dòng)測(cè)試：<span class="blink">文字閃動(dòng)效果</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>

以上代碼可直接復(fù)制在本地測(cè)試，測(cè)試效果如下截圖：