純粋な CSS を使用してシンプルなフォト アルバムを実装する slideshow_html/css_WEB-ITnose

以前 CSS について 2 つの記事を投稿しましたが、皆さん非常に注目しているようです。さあ、鉄は熱いうちにもう一度打ちましょう~~

はじめに

簡単な実装です。純粋な CSS を使用 スライド効果は実験用です。デモを見たい場合は、実稼働環境では使用しないでください。そうしないと、結果は自己負担になります。

デモのアドレス: http://output.jsbin.com/tewuso

レンダリング

レンダリングは録画するとひどいので、もうアップロードしません: (

技術的なもの)ポイント

• :ターゲット擬似クラス
• オブジェクトフィット属性

原理の説明

: ターゲット擬似クラスは、次のように現在のアンカーターゲット要素のスタイルを指定できます:

<a href="#image-1">查看图片</a><img id="image-1" src="xxx.jpg">

#image-1{  display: none;}#image-1:target{  display: block;}

Click "画像を表示」を実行すると、元々隠れていた #image-1 が突然現れます。すごいでしょう? (Pfft→_→)

CSS の object-fit 属性は、このデモでは補助的な機能にすぎません。その機能はオブジェクト クラス要素 (img、video など) の実際のコンテンツを要素にどのように埋めるかを指定します。これは、background-size: contains/cover と似ています。
より詳細に説明すると、 Zhang Xinxu の記事を参照してください: CSS3 object-position/object-fit プロパティの準詳細な理解

ターゲットという魔法のようなものが存在することがわかったので、CSS を使用して効果を実現することができます。 「小さな画像をクリックすると大きな画像が表示される」ということを理解してから、上下の画像を連続して表示できるように HTML をもう少しスムーズに記述します

コード

まず HTML 部分に移動すると、次のことがわかります。この方法で実現されるスライドショー効果は、あまり柔軟ではありません。もちろん、そのようなコードを生成するプログラムを使用することも非常に便利です。そのほとんどは、CSS コードです。は位置決めとレイアウトに使用され、その多くはトランジション アニメーションの効果に使用されており、パフォーマンスに影響を与えるようです~

そうです

最後に、単一の画像の効果を示します: http:// Output.jsbin.com/goyeju/2 、セックスに興味のある学生は、その原理を自分で学ぶことができます。これも非常に簡単です