CSS3で輝くリンクを作成する方法

この記事では、CSS3を使用してアニメーション化された輝くリンクの作成を示しています。 以前の記事では、テキストシェードと透明なテキストを使用してぼやけた効果を使用しましたが、これはテキストシャドウを活用して、ホバーまたはフォーカスに輝く効果をもたらします。 IE9ユーザーには、テキストシェードサポートがないため、新しいブラウザが必要になります。

効果は、テキストシャドウとCSS3の遷移の組み合わせで達成されます。 コードを調べてみましょう。

最初に、HTML：クラス「グロー」との単純なリンクが使用されます：

CSSは、初期状態と遷移プロパティを定義することから始まります。遷移は500msに設定され、線形タイミングが滑らかな効果をもたらします。 ベンダーのプレフィックスは、幅広いブラウザの互換性に含まれています：

<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" class="glow">Glowing Link</a>

次に、ホバー状態とフォーカス状態では、光沢のある効果が定義されます。 より顕著な効果のために、1つの白と1つの黄色の2つのテキストシャドウが使用されます：

a.glow, a.glow:hover, a.glow:focus {
    text-decoration: none;
    color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15baaf;
    text-shadow: none;
    -webkit-transition: 500ms linear 0s;
    -moz-transition: 500ms linear 0s;
    -o-transition: 500ms linear 0s;
    transition: 500ms linear 0s;
    outline: 0 none;
}

デモンストレーションページ（リンクは安全のために省略）を示しています。 アニメーションをカスタマイズするために、さまざまな

a.glow:hover, a.glow:focus {
    color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bfff;
    text-shadow: -1px 1px 8px https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bffc, 1px -1px 8px https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bfff;
}

および遷移プロパティを試してください。

text-shadowブラウザ互換性メモ：

効果は、最新のブラウザ（Firefox、Chrome、Safari）でうまく機能します。 IE9にはテキストシャドウのサポートがありません。オペラは移行をサポートしていますが、テキストシャドウに一貫して適用できないため、スムーズではなくアニメーションが発生します。 デモの2番目のリンクセットは、バックライト効果（背景に合わせてテキスト色の変更）を使用しますが、これにより、古いIEバージョンではテキストが見えなくなります。 ModernizrまたはText-Shadow検出スクリプト（以下の例）はこれに対処できます。

この手法は、リンクに視覚的な関心を追加するためのシンプルで効果的な方法を提供します。 あなたの作品を自由に共有してください！

長さの制限のためによくある質問（FAQ）は省略されていますが、元のテキストは包括的な回答を提供します。

以上がCSS3で輝くリンクを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。