jsでテキストの点滅効果を実現するにはどうすればよいですか? (写真 + ビデオ)-CSSの知識-php.cn

jsでテキストの点滅効果を実現するにはどうすればよいですか? (写真 + ビデオ)

藏色散人

リリース： 2019-11-30 16:39:05

オリジナル

7808 人が閲覧しました

この記事では主にjsを使ってテキストの点滅効果を実現する方法を紹介します。

フロントエンドページのデザインのプロセスで、動的な特殊効果を追加すると、明らかに Web サイトのコンテンツがより豊かで美しくなり、ユーザーの注目を集めることができます。

フロントエンドの初心者にとって、js を使用して特殊効果を実装するのは難しいかもしれませんが、実際には非常に簡単です。

以下では、テキストの点滅を実現する js の特殊効果メソッドを簡単なコード例を通して紹介します。 [その他の JS 特殊効果については、js 特殊効果コードのダウンロード列にアクセスして表示できます]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js实现文字闪烁特效</title>
</head>
<body>
<div id="blink">PHP中文网</div>
</body>
<script language="javascript">
    function changeColor() {
        var color = [&#39;#F96&#39;,&#39;#cc6&#39;];
        // parseInt 将字符串类型转换为整型  random 获取0-1之间的随机数   color.length color数组的长度
 document.getElementById("blink").style.color = color[parseInt(Math.random() * color.length)];
    }
    // 执行定义好的changeColor方法，200毫秒执行一下
 setInterval("changeColor()", 200);
</script>
<style>
    * {
        color: #CC6
 }
</style>
</html>

ログイン後にコピー

最終的な効果は次のとおりです:

jsでテキストの点滅効果を実現するにはどうすればよいですか? (写真 + ビデオ)