CSS を使用してテキスト属性を動的に制御する_CSS/HTML

この記事では、CSS を使用してテキスト属性を動的に制御するトピックについて詳しく紹介します。CSS の属性値を動的に変更する機能を使用して、テキストの複数の属性値を定義します。イベントが発生したら、それをトリガーするためにイベントを使用し、期待される目的を達成するためにテキスト属性値を変更します。

CSS を使用してテキストのプロパティを簡単に動的に変更できるため、動的に拡大、縮小、テキストの色の変更、テキストの背景、文字間隔、行間隔を変更するテキストを作成できます。などの Web ページの効果はすべて制御下にあります。ちょっと神秘的ではありませんか？それがまさにその通りです。それは複雑ですよね？いいえ！この記事を読むと、それがとてもシンプルであることが理解できるでしょう。
次の例を参照してください:

1. テキスト サイズを動的に変更します
この例の効果は次のとおりです: マウスがこの部分上にあるとき。テキストのサイズが大きくなり、マウスを離すと元の位置に戻ります。
制作方法:
1. Dreamweaver3 では、CSS パネルを使用して 2 つの CSS クラスを定義します。1 つは「style1」という名前で、もう 1 つは「style2」という名前で定義されます。フォントサイズ（12px）。取得したCSSコードは以下のとおりです。

Dreamweaver を使用していないネットユーザーは、Web ページ コードの
と

の間に上記のコードを直接コピーできます。 2. このテキストの タグにコードを追加します: onmouseover="this.className=''style1''" onmouseout="this.className=''style2''"。この時点で制作は完了し、エフェクトを生成できるテキストのソースコードは次のとおりです。

このテキスト上にマウスを置くとテキストが大きくなり、マウスを置くとテキストが大きくなります。マウスを遠ざけると小さくなります。
Dreamweaver を使用していないネチズンは、コードを上記に変更するだけで、実際の効果を確認することができます。

2. テキストのサイズ、色、太さを同時に動的に変更します。
この例の効果は次のとおりです。マウスがテキスト上にあるとき、サイズが変更されます。 、色、テキストの太さが変更され、マウスを離すと元の状態に戻ります。 この例の作成方法は例 1 と同じです。唯一の違いは、CSS で異なるテキスト属性が定義されているため、作成方法は繰り返されません。
と
の間に追加された CSS コードは次のとおりです:

エフェクトを生成できるテキストのソースコードが完成しました。

このテキストの上にマウスを移動すると、テキストのサイズ、色、太さが変更され、マウスを離れると元の状態に戻ります。
3. テキストの一部の背景を動的に変更します

この例の効果は次のとおりです。マウスがテキストの特定の行上に移動すると、その背景が変更されます。行内のテキストの一部が変更されますが、当社のビジネスのその他の背景は変わりません。

この例と上記の例では、生成方法にいくつかの変更があります。上記の例ではテキスト全体の属性が変更されるため、トリガー イベントは「P」マークにロードされます。テキストの一部の背景色が変更されるため、背景を変更したいテキストを「Span」タグで囲んでから、「Span」タグにトリガーイベントをロードします。 この例の と

の間に追加された CSS コードは次のとおりです:

制作完了後、エフェクトを生成できるテキストのソースコードは次のとおりです。 🎜>

マウスをこのテキスト上に移動すると、背景が変化します
が、この行の他の段落の背景は変化しません。
4. ハイパーリンクにアイコンを動的に追加します

この例の効果は次のとおりです。マウスをハイパーリンク上に移動すると、その左側に画像が表示されます。マウスが離れると画像が消えます。 この例の作成方法は前の例と同じで、どちらもテキストの背景を変更するものですが、作成時に注意する点がいくつかあります。1. CSS 背景、画像の背景を選択し、設定します。画像の背景の「繰り返し」パラメータを設定する場合は、「繰り返しなし」(タイルなし) を選択します。
2. ハイパーリンクを設定する場合、画像の位置を予約します。その左側;
3. トリガーイベントがハイパーリンクにロードされます。
この例の と の間に追加された CSS コードは次のとおりです: エフェクトを生成できるハイパーリンクが完成しました。ソースコードは次のとおりです。 マウスを上に移動します テキストの CSS プロパティを動的に変更することで、多くの特殊効果を作成することもできますが、方法は基本的に同じです, なので、一つずつ例は出しませんが、方法をマスターしたら、想像力を使って作成してください。