純粋な 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 プロパティの準詳細な理解

そうです