CSS と JS を使用してページ上のテキストがちらつくようにするにはどうすればよいですか? (例)

藏色散人
リリース: 2018-08-11 17:48:11
オリジナル
4364 人が閲覧しました

この記事では主にjsでテキストの点滅効果を実現する方法を紹介します。 Web を閲覧していると、点滅する特殊効果のあるテキストに惹かれることがあります。これにより、Web サイトの焦点がより強調されると同時に、ユーザーのクリック数が増加します。実際、純粋な CSS コードを使用するとテキストの点滅の効果を実現するのは難しく、動作させるには JS と組み合わせる必要があります。

ここでは、テキストの点滅の特殊効果を実現するための非常に簡単な js メソッドを紹介します。つまり、指定した色に従ってテキストが次々に点滅して表示されます。テキストの点滅を実現するための

js の具体的なコード例は次のとおりです。

<!DOCTYPE HTML>
<html lang="en">
<head>
    <title>js文字闪烁效果</title>
    <meta charset="UTF-8">
    <style type="text/css">
    </style>
</head>
<body>
<script language="javascript">
    function changeColor(){
        var color="#f00|#0f0|#00f|#880|#808|#088|yellow|green|blue|gray";
        color=color.split("|");
        document.getElementById("blink").style.color=color[parseInt(Math.random() * color.length)];
    }
    setInterval("changeColor()",200);
</script>
<div align="center">
    <span id="blink">js实现文字闪烁示例</span>
</div>
</div>
</body>
</html>
ログイン後にコピー

効果は次のとおりです。

CSS と JS を使用してページ上のテキストがちらつくようにするにはどうすればよいですか? (例)

注: text-decoration 属性は、テキストに追加される装飾を指定します。

テキスト装飾点滅の値。 IE、Chrome、Safari は「blink」属性値をサポートしていません。つまり、現在の主流のブラウザーはこの属性値をサポートしておらず、Firefox のみをサポートしています。したがって、テキストの点滅効果を実現したい場合は、js と組み合わせる必要があります。

以上がCSS と JS を使用してページ上のテキストがちらつくようにするにはどうすればよいですか? (例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート