CSS は、A タグの背景を使用して、興味深い効果を作成できます。ページ 1/2_体験交流

このエフェクトは、今日誰かが私に書いて質問したエフェクトです。A タグの背景を使用する前に同様のエフェクトを作成しました。それで私は戻ってきて、彼が要求した効果を書き留めました。ところで、皆さんと共有するために投稿したいと思いますが、創造性が高ければ、間違いなくもっと面白いエフェクトを作成できるでしょう。

彼が提案したエフェクトは Jiutian Music のホームページの FLASH エフェクトです。おそらく FLASH や SEO を使いたくないため、CSS を使用して同じエフェクトを模倣したいと考えています。そこで、FWを使ってこの効果をシミュレートするGIF画像を2枚作成しましたが、テスト用だったので、画像などの詳細は考慮されていない部分が多かったです。少し荒っぽいですが、それでも面白そうです（笑）...

まず第一に、a:link、a:visited、a:hover、a:active: これは次のようなものであると言う人もいるかもしれません。ナンセンスですが、初心者がこれを見ると非常に役立ちます。自分で理解するよりも、他の人から教えてもらった方が早いです。

コードをコピー コードは次のとおりです。

a:link{}
a:visited {}
a:hover {}
a:active {}

上記のステートメントは、それぞれ「通常のリンク」、「訪問済みリンク」、「マウスオーバー時」、「マウスクリック時」のスタイルを定義しています。

初心者の方はここで注意が必要で、この4行の順番を上記の順番で書かないと期待と異なる効果が表示されます。単純なメモリ面は「LVHA」です。愛は。

次は、この効果の作成に使用される 2 つの画像です:

以下は CSS 部分です:

コードをコピー コードは次のとおりです。

以下はレイアウト部分です:
プログラム コード

コードをコピー コードは次のとおりです。

次のような効果があります:

[Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、実行する前に更新する必要があります。 ]