CSS_CSS/HTML によって制御されるちらつき効果

テキストまたは画像の周囲にハローが表示されます。このハローは、マウスをその上に移動するとすぐに点滅を停止し、マウスを遠ざけると点滅を続けます。この効果は、他の人からの特別な注意が必要なコンテンツ (警告、新しいコンテンツのレポートなど) に使用され、より良い結果を達成できます。

上記の例では、キャプチャした写真なので、ダイナミックな効果はわかりませんが、以下に紹介する方法を試してみると、一目瞭然です。制作のアイデアは次のとおりです。CSS の「Glow」フィルターを使用してハロー効果を生成し、CSS の動的に変化するプロパティを使用し、小さな JavaScript プログラムを使用してプロパティ値を毎秒変更してちらつき効果を実現します。次に、2 つのイベントを使用します ( onmouseover および onmouseout) を使用して Javascript プログラムを呼び出し、ちらつきを発生させるかどうかを制御します。

製造方法:

1. グローフィルターを作成します。 CSS フィルターの設定方法については、「CSS フィルター適用のヒント」の関連記事を参照してください。ここでは繰り返しません。 Dreamweaver を使用していないネットユーザーの場合は、Web ページのソース コードの

と の間に次のコードをコピーしてください:

2. レイヤーを挿入し、「bob」という名前を付けます。レイヤー上に文字を書きます。次に、レイヤーにグロー フィルターをロードし、2 つのイベントを追加して、マウスがテキスト上に移動すると点滅を強制的に停止し、マウスがテキストから離れると点滅を継続します。コード: onclick="stopflash(this)"、このコードの機能は次のとおりです。マウスがテキスト上に移動すると、プログラムの "stopflash(this)" 関数が呼び出され、点滅を停止します。この文 コードの機能は次のとおりです。マウスがテキストから離れると、プログラムの「init()」関数が呼び出され、ハローが点滅します。この例が完了すると、レイヤー マーキングのコードは次のようになります:

} // ここでの「1000」はミリ秒単位の点滅時間で、この例では 1000 ミリ秒 (つまり 1 秒) が設定されており、必要に応じて変更できます。

Function stopflash(obj) // Halo の点滅が停止します

{clearInterval(obj.flashTimer)

}

//-->

4. Web ページのソース コードの

タグに次のコードを追加します: onload="init()"。このコードが行うことは、Web ページが読み込まれるときにハローが点滅し始めることです。

この時点で、F12 を押して、期待される効果を確認します。

ハローの色と長さは、CSS フィルターのパラメーター値を変更することで変更できます。ハローの点滅の時間間隔は、JavaScript の間隔時間の値を変更することで調整できます。レイヤーに画像を挿入すると（背景が透明なGIF画像が良いです）、画像の端にハローがちらつく効果になります。