CSS3 でテキストの点滅効果を実現する 3 つの方法サンプルコード

1. 透明度を変更してテキストを徐々に点滅させると、次のような効果が得られます。

<!DOCTYPE html>
<html>
<ヘッド>
</head>
<title>テキストが点滅</title>
<本文>
<div class="blink">
たった一つの火花が草原の火災を引き起こす可能性がある</div>
</本文>
<スタイル>
.myclass{
    	letter-spacing:5px;/*単語間隔*/
    	色: 赤;
    	フォントの太さ:太字;
    	フォントサイズ:46px;
    }
	
/* キーフレームアニメーションを定義します。名前は blink です */
@keyframes 点滅{
  0%{不透明度: 1;}
     
  100%{不透明度: 0;} 
}
/* 互換性プレフィックスを追加 */
@-webkit-keyframes 点滅 {
    0% { 不透明度: 1; }
    100% { 不透明度: 0; }
}
@-moz-keyframes 点滅 {
    0% { 不透明度: 1; }
    100% { 不透明度: 0; }
}
@-ms-keyframes 点滅 {
    0% {不透明度: 1; } 
    100% { 不透明度: 0;}
}
@-o-keyframes 点滅 {
    0% { 不透明度: 1; }
    100% { 不透明度: 0; }
}
/* 点滅クラスを定義する */
.点滅{
	色: 赤;
	フォントサイズ:46px;
    アニメーション: 1 秒間点滅、線形、無限;  
    /* その他のブラウザ互換性プレフィックス*/
    -webkit-animation: 1 秒の線形無限点滅;
    -moz-animation: 1 秒点滅、線形、無限;
    -ms-animation: 1 秒間、直線的に無限に点滅します。
    -o-animation: 1秒間の直線的無限点滅;
}
<スタイル>
</html>

段階的な点滅効果が必要ない場合は、キーフレームアニメーションで不透明度の値を 50% と 50.1% に定義できます。次のように：

    @-webkit-keyframes 点滅 {
        0% { 不透明度: 1; }
        50% { 不透明度: 1; }
        50.01% { 不透明度: 0; }
        100% { 不透明度: 0; }
    }

2. 背景画像または背景グラデーションを使用して、テキストの色に点滅効果を実現します。レンダリング:

<!DOCTYPE html>  
<html>  
    <ヘッド>  
        <メタ文字セット="UTF-8">  
        <タイトル></タイトル>  
        <スタイル タイプ="text/css">  
        .点滅{ 
    	表示: インラインブロック;
    	フォントサイズ: 46px;
    	マージン: 10px;
    	背景: 線形グラデーション(左、#f71605、#e0f513); 
        背景: -webkit-linear-gradient(左、#f71605、#e0f513);
        背景: -o-linear-gradient(右、#f71605、#e0f513);
		-webkit-background-clip: テキスト;
		-webkit-テキストの塗りつぶし色: 透明;
		アニメーション:スクラッチ 0.253 秒 線形前進無限;
		/* その他のブラウザ互換性プレフィックス*/
	    -webkit-animation:scratchy 0.253秒 線形前進無限;
	    -moz-animation: スクラッチ 0.253 秒 線形前進無限;
	    -ms-animation: スクラッチ 0.253 秒 線形前進無限;
	    -o-アニメーション: スクラッチ 0.253 秒 線形前進無限;
    }  
   @keyframes スクラッチ {
		0% {
			背景位置: 0 0;
		}
		25% {
			背景位置: 0 0;
		}
		26% {
			背景位置: 20px -20px;
		}
		50% {
			背景位置: 20px -20px;
		}
		51% {
			背景位置: 40px -40px;
		}
		75% {
			背景位置: 40px -40px;
		}
		76% {
			背景位置: 60px -60px;
		}
		99% {
			背景位置: 60px -60px;
		}
		100% {
			背景位置: 0 0;
		}
	}
	/* 互換性プレフィックスを追加 */
	@-webkit-keyframes スクラッチ {
	    0% {
			背景位置: 0 0;
		}
		25% {
			背景位置: 0 0;
		}
		26% {
			背景位置: 20px -20px;
		}
		50% {
			背景位置: 20px -20px;
		}
		51% {
			背景位置: 40px -40px;
		}
		75% {
			背景位置: 40px -40px;
		}
		76% {
			背景位置: 60px -60px;
		}
		99% {
			背景位置: 60px -60px;
		}
		100% {
			背景位置: 0 0;
		}
	}
	@-moz-keyframes スクラッチ {
	    0% {
			背景位置: 0 0;
		}
		25% {
			背景位置: 0 0;
		}
		26% {
			背景位置: 20px -20px;
		}
		50% {
			背景位置: 20px -20px;
		}
		51% {
			背景位置: 40px -40px;
		}
		75% {
			背景位置: 40px -40px;
		}
		76% {
			背景位置: 60px -60px;
		}
		99% {
			背景位置: 60px -60px;
		}
		100% {
			背景位置: 0 0;
		}
	}
	@-ms-keyframes スクラッチ {
	   0% {
			背景位置: 0 0;
		}
		25% {
			背景位置: 0 0;
		}
		26% {
			背景位置: 20px -20px;
		}
		50% {
			背景位置: 20px -20px;
		}
		51% {
			背景位置: 40px -40px;
		}
		75% {
			背景位置: 40px -40px;
		}
		76% {
			背景位置: 60px -60px;
		}
		99% {
			背景位置: 60px -60px;
		}
		100% {
			背景位置: 0 0;
		}
	}
	@-o-keyframes スクラッチ {
	   0% {
			背景位置: 0 0;
		}
		25% {
			背景位置: 0 0;
		}
		26% {
			背景位置: 20px -20px;
		}
		50% {
			背景位置: 20px -20px;
		}
		51% {
			背景位置: 40px -40px;
		}
		75% {
			背景位置: 40px -40px;
		}
		76% {
			背景位置: 60px -60px;
		}
		99% {
			背景位置: 60px -60px;
		}
		100% {
			背景位置: 0 0;
		}
	}
    </スタイル>  
    </head>  
    <本文>  
        <div class="blink">たった一つの火花が草原火災を引き起こす可能性がある</div>
    </本文>  
</html>

3. text-shadow の値を設定することで、効果図に示すように、テキストシャドウが点滅する効果を実現できます。

<!DOCTYPE html>  
<html>  
    <ヘッド>  
        <メタ文字セット="UTF-8">  
        <タイトル></タイトル>  
        <スタイル タイプ="text/css">  
        .点滅{ 
    	フォントサイズ: 46px; 
    	カラー:#4cc134; 
    	マージン: 10px;
    	アニメーション: changeshadow 1s easy-in infinite;
    	/* その他のブラウザ互換性プレフィックス*/
	    -webkit-animation: changeshadow 1s linear infinite;
	    -moz-animation: changeshadow 1s linear infinite;
	    -ms-animation: changeshadow 1s linear infinite;
	    -o-animation: changeshadow 1s linear infinite;
    }  
    @keyframes 影の変更 {  
        0%{ テキストシャドウ: 0 0 4px #4cc134}  
        50%{ テキストシャドウ: 0 0 40px #4cc134}  
        100%{ テキストシャドウ: 0 0 4px #4cc134}  
    }
    /* 互換性プレフィックスを追加 */
	@-webkit-keyframes の影の変更 {
	  0%{ テキストシャドウ: 0 0 4px #4cc134}  
          50%{ テキストシャドウ: 0 0 40px #4cc134}  
          100%{ テキストシャドウ: 0 0 4px #4cc134}  
	}
	@-moz-keyframes の影の変更 {
	    0%{ テキストシャドウ: 0 0 4px #4cc134}  
            50%{ テキストシャドウ: 0 0 40px #4cc134}  
            100%{ テキストシャドウ: 0 0 4px #4cc134}  
	}
	@-ms-keyframes チェンジシャドウ {
	    0%{ テキストシャドウ: 0 0 4px #4cc134}  
            50%{ テキストシャドウ: 0 0 40px #4cc134}  
            100%{ テキストシャドウ: 0 0 4px #4cc134}  
	}
	@-o-keyframes チェンジシャドウ {
	    0%{ テキストシャドウ: 0 0 4px #4cc134}  
            50%{ テキストシャドウ: 0 0 40px #4cc134}  
            100%{ テキストシャドウ: 0 0 4px #4cc134}  
	}
    </スタイル>  
    </head>  
    <本文>  
        <div class="blink">たった一つの火花が草原火災を引き起こす可能性がある</div>
    </本文>  
</html>

ブログに感謝します: https://blog.csdn.net/art_people/article/details/104768666/

CSS3 でテキスト点滅効果を実現する 3 つの方法とサンプルコードについての説明はこれで終わりです。CSS3 テキスト点滅に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: HTML にネストされた div の無効なマージンに対する解決策

>>: JavaScript の Set データ構造の詳細な説明