ホームページ > 記事 > ウェブフロントエンド > 画像表示効果を実現する純粋な CSS3_html/css_WEB-ITnose
画像表示効果を実現する純粋な CSS3_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:51:021194ブラウズ
この記事で実装する純粋な CSS3 の画像表示特殊効果は、これまでは JavaScript を使用してのみ実装できました。特にパフォーマンスに関して多くの制限を受けることが考えられます。今日は、単純な CSS3 コードを使用してこれを実装します。最新のブラウザを使用すると、そのアニメーション効果が非常にスムーズであることがわかります。
デモを見る
HTML コード
上記のデモを通じて、その HTML 結果が複数の子要素を含む親要素であることが推測できたでしょう。ここでは ol と他の要素が使用されています。リー。
CSSコード
CSSコードによって実装されるアクションは、マウスホバー時に幅を変更することです。
いくつかの非常に単純な CSS コードで必要なアクションを実現できますが、ここで注意すべき点がいくつかあります。奇妙なことの効果。
画像表示の幅を制御するために 2 つのトランジション属性を使用します。最初は画像の上にマウスを置くと幅が増加します。
デモを見る
本文: http://www.webhek.com/css-kwicks
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。