CSSを巧みに使用して画像のホバリングを実現し、追加の要素なしでアニメーション効果を明らかにします!この記事では、 <img src="https://img.php.cn/upload/article/000/000/173906107393958.jpg" alt="" css> <code><img src="https://img.php.cn/upload/article/000/000/000/173906107393958.jpg" alt="How to Add a CSS Reveal Animation to Your Images ">
核心要点:
<img alt="CSSを追加する方法あなたの画像にアニメーションを明らかにします" >
object-fit: cover
object-position: right
object-fit: none
プロパティは、画像のアスペクト比を維持し、アニメーション中に画像が移動するのを防ぐために使用されます。 <img alt="CSSを追加する方法あなたの画像にアニメーションを明らかにします" >
パディング方向を調整することにより、アニメーション効果を拡張して、より多くの変更を作成できます。また、一部の構成ではプロパティが異なる効果を生み出すこともありますが、画像の固有の寸法に合わせてCSS幅と高さが必要です。
この記事では、いくつかのCSSのヒントを調べて、印象的なPicture Hoverアニメーションを作成するのに役立ちます。 「シンプルです!写真の上に追加の要素を追加して、それは本当ですが、追加の要素や擬似要素は使用しません。画像要素のみを使用すると、その上に何も追加できないように思えるため、これは信じられないほど聞こえるかもしれません。確かに、写真の上には何も追加しませんが、この効果をスマートにシミュレートします!これが私たちが一緒に探索するものを示すCodePenデモです:
Codepenデモリンクかっこいいですか?アニメーションを明らかにすることは、わずか数行のコードで実現できます。追加の要素は必要ありません。その背後にあるミステリーに飛び込みましょう。
初期設定:img { --s: 200px; /* 图片大小 */ width: var(--s); height: var(--s); box-sizing: border-box; }
width
最初に、画像サイズを定義します:height
aspect-ratio
box-sizing: border-box
これまでのところ、コードは非常に簡単です。簡単にするために、正方形の画像を使用しますが、あらゆるサイズの写真も使用できます。明示的に
を設定し、を使用したり、画像のデフォルトサイズを保持したりしないことが非常に重要です。これは私たちのアニメーションにとって必須であり、後でその理由を説明します。また、の使用に注意を払うことも非常に重要です。現時点では効果はありませんが、次のステップに進み、必要な理由を確認しましょう。
box-sizing: border-box
パディングの追加:<
固定サイズが定義され、を使用する画像にパディングを追加するとどうなりますか?試してみましょう!
の効果です。 MDNが説明するように、box-sizing: border-box
は、要素の幅と高さで指定した値の境界とパディングを検討するようブラウザに指示します。要素の幅を100ピクセルに設定すると、その100ピクセルには、追加された境界線または塗りつぶしが含まれ、コンテンツボックスが収縮して余分な幅を吸収します。 border-box
背景色の追加:
前の例を取り、背景を追加しましょう。 私たちは目標に近づき始めています。背景は、要素全体を論理的にカバーします。写真の下には見えません(透明な写真を使用しない限り)が、塗りつぶし領域で見ることができます。私たちの目標は画像を明らかにすることですので、まずパディングを追加してから、ホバリング時に0に設定しましょう。 これはまだ私たちが望む効果ではありませんが、私たちはどんどん近づいています! 「偽の」明らかなアニメーションを完璧にするために、1つの成分が必要です!
オブジェクトフィットとオブジェクトポジションの追加:
欠落している部分は、画像が絞られないことを避けることであり、ここに最後のトリックがあります。およびobject-fit
値を使用します。 MDNが説明するように:コンテンツを交換すると、要素のコンテンツボックス全体を埋めながら、アスペクト比を維持するためにサイズを変更します。オブジェクトのアスペクト比がボックスのアスペクト比と一致しない場合、オブジェクトは収まるようにトリミングされます。 cover
見ましたか?写真はもう絞られていません!パディングを追加/削除しながら、コンテンツ領域内の割合を維持します。わかりました、そのため、効果は最初のプレゼンテーションとは異なると思うかもしれません。写真は奇妙に動きます。それは正しい。だから今、私たちはobject-position
に頼ります。デフォルトの値はcenter
であるため、画像は常にコンテンツ領域の中心にあり、内部に収まるようにトリミングされます。そのため、アニメーションで動きます。次に行う必要があることは、簡単に予測できるはずです。場所を変更して、写真が動かないことを確認します。左からパディングを追加します。そのため、画像の位置を右にピン留めするためにobject-position: right
を使用する必要があります。 Codepenデモリンク
明らかなアニメーションが完了しました!写真の上にオーバーレイや余分な要素は必要ありません。シンプルな背景色といくつかの画像の位置決めのヒントを使用することで、少量のシンプルなコードを備えた美しい明らかなアニメーションを実現しました。充填方向とobject-position
を調整することで、方向を簡単に更新できます。これが4つの方向を含む前のものからの最初のデモです。 Codepenデモリンク
以下は、使用するCSSです
img { --s: 200px; /* 图片大小 */ width: var(--s); height: var(--s); box-sizing: border-box; }
その他のアニメーションが明らかになりました:
同じアイデアを使用して、トリックを拡張してより多くの変更を作成できます。片側からパディングを追加/削除する代わりに、両側またはすべての側にパディングを追加/削除することができます。 上記のコードを確認した場合、前のコードと大きな違いがあることはわかりません。私たちがしたことは、同じ効果のより多くのバリエーションを作成するために、異なる塗りつぶし構成をセットアップすることだけでした。最初と最後の例では、トリックを持つためにの代わりにobject-fit: none
を使用します。これらの場合、塗りつぶしはコンテンツ領域の幅と高さを0に減らしますが、他のすべての場合、高さまたは幅を減らすだけです。この構成では、object-fit: cover
は機能しませんが、cover
は仕事をすることができます。 MDN注:交換コンテンツはサイズ変更されません。 none
を使用しないのですか?使用できますが、機能しますが、小さな欠点があります。 none
画像の固有の寸法が考慮されるため、CSS幅と高さを、手法が有効にするための固有の寸法に等しいようにする必要があります。一方、は写真のスケールのみを保持し、画像のサイズをサイズに変更するため、画像のCSSサイズを安全に定義できます。これは比較であるため、違いを確認できます。 Codepenデモリンクnone
cover
どちらの場合もアニメーションが表示されますが、
を使用すると、画像がサイズを変更せず、デフォルトサイズ(500x500)を保持しますが、これは良くありません。 object-fit: none
割合のみを維持すると、画像はボックスサイズに合わせてサイズ変更されます。 object-fit: cover
結論:
この小さなCSS実験を楽しんだことを願っています。シンプルなトリックと数行のコードを使用して、要素だけでクールな公開アニメーションを実装しました。また、同じコード構造を使用して多くの変更を加えました。このテクニックでさらにできることがあります。ホバリング中に黒と白の画像をカラー画像に変換する最後の例を残します。 <img alt="CSSを追加する方法あなたの画像にアニメーションを明らかにします" >
Codepenデモリンク
以上がCSSを追加する方法あなたの画像にアニメーションを明らかにしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。