画像表示効果を実現する純粋な CSS3_html/css_WEB-ITnose

この記事で実装する純粋な CSS3 の画像表示特殊効果は、これまでは JavaScript を使用してのみ実装できました。特にパフォーマンスに関して多くの制限を受けることが考えられます。今日は、単純な CSS3 コードを使用してこれを実装します。最新のブラウザを使用すると、そのアニメーション効果が非常にスムーズであることがわかります。

デモを見る

HTML コード

上記のデモを通じて、その HTML 結果が複数の子要素を含む親要素であることが推測できたでしょう。ここでは ol と他の要素が使用されています。リー。

CSSコード

CSSコードによって実装されるアクションは、マウスホバー時に幅を変更することです。

いくつかの非常に単純な CSS コードで必要なアクションを実現できますが、ここで注意すべき点がいくつかあります。奇妙なことの効果。

画像表示の幅を制御するために 2 つのトランジション属性を使用します。最初は画像の上にマウスを置くと幅が増加します。

ここでは数枚の写真のみを使用しましたが、写真の数に制限はありません。

デモを見る




本文: http://www.webhek.com/css-kwicks