CSS3 ベースの 3D ブラインド画像トランジション効果_html/css_WEB-ITnose

インターネット上で jQuery を使用して作成された多くのシャッター エフェクトを見たことがあるかもしれませんが、この作業を純粋な CSS を使用して実行できますか?答えは「はい」です。このブラインド効果を作成できるだけでなく、レスポンシブにすることもできます。

オンライン プレビュー ソース コードのダウンロード

純粋な CSS ブラインド効果を作成するには、HTML 構造が鍵となります。 HTML 構造では、「ブラインド」を構成するために複数の同一の画像を使用する必要があります。デモで 10 個のブラインドを作成するには、10 個の同一の を

タグ内に配置する必要があります。同時に、ブラインドの裏側に配置する他の 10 枚の写真も必要です。画像の各グループは異なるクラスに設定されます。コードは次のとおりです。

<figure id="blinds">    <img src="autumn-face.jpg" alt class="first">    <img src="autumn-face.jpg" alt class="first">    …    <img src="autumn-face.jpg" alt class="first">    <img src="julia.jpg" alt class="second">    <img src="julia.jpg" alt class="second">    …    <img src="julia.jpg" alt class="second"></figure>   

このとき、すべてのブラインド スライスが同時に回転されます。ブラインドの「脈動」効果を作成するには、各スライスのトランジションの遅延時間を設定します。

すごいです

クリップ属性を使用する最大の利点の 1 つは、自然に応答性が高いことです。画像が縮小されると、それに応じてすべてのスライスも縮小されます。デモを確認してブラウザを縮小してみてください。ブラウザの幅が 500 ピクセル未満の場合、画像ブラインドには 5 つのスライスしかありません。

経由: http://www.w2bc.com/Article/25379