CSS 코드를 사용하여 텍스트 표시 깜박임 효과를 만드는 방법은 무엇입니까? (코드 예)-CSS 튜토리얼-php.cn

CSS 코드를 사용하여 텍스트 표시 깜박임 효과를 만드는 방법은 무엇입니까? (코드 예)

藏色散人

풀어 주다： 2018-08-10 10:04:01

원래의

11526명이 탐색했습니다.

웹 페이지에서 디자이너는 제품 테마를 강조하기 위해 일반적으로 텍스트를 추가하거나 텍스트를 깜박이게 하거나 정기적으로 색상을 변경하는 등의 특수 효과를 추가합니다. 관심을 끌기 위한 목적을 달성하기 위해. 그렇다면 PS로 제작한 GIF 애니메이션 외에 이러한 특수 효과를 얻기 위해 어떤 다른 방법을 사용할 수 있을까요? 코드에 대해 조금 아는 사람들은 CSS에 이탤릭체, 볼드체 등 다양한 유형의 중국어 글꼴 스타일이 있다는 것을 알고 있습니다. 그래서 여기에서는 CSS 코드를 사용하여 텍스트 깜박임 효과를 만드는 방법을 소개합니다. 이 기사에는 참조용으로 두 가지 깜박임 방법이 있습니다.

1. CSS 폰트 플래싱(wave flashing)에 대한 구체적인 샘플 코드는 다음과 같습니다.

<!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 코드를 사용하여 텍스트 표시 깜박임 효과를 만드는 방법은 무엇입니까? (코드 예)

2. 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 코드를 사용하여 텍스트 표시 깜박임 효과를 만드는 방법은 무엇입니까? (코드 예)