CSSを巧みに使用して畫像のホバリングを?qū)g現(xiàn)し、追加の要素なしでアニメーション効果を明らかにします！この記事では、 <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173906107393958.jpg" class="lazy" alt="" css> <code><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173906107393958.jpg" class="lazy" alt="How to Add a CSS Reveal Animation to Your Images ">

核心要點(diǎn)：

• 僅需<img alt="CSSを追加する方法あなたの畫像にアニメーションを明らかにします" >
• コアポイント：object-fit: coverobject-position: right
  CSSを?qū)g裝するには、追加の要素や擬似要素のないアニメーションを?qū)g裝するために
のみ
• 要素が必要です。 object-fit: none
アニメーションの鍵は次のとおりです。畫像にパディングを追加してから、ホバリング時(shí)に徐々にゼロに減らし、背景色を使用して表示される畫像の視覚効果を作成します。

および

プロパティは、畫像のアスペクト比を維持し、アニメーション中に畫像が移動(dòng)するのを防ぐために使用されます。 <img alt="CSSを追加する方法あなたの畫像にアニメーションを明らかにします" > パディング方向を調(diào)整することにより、アニメーション効果を拡張して、より多くの変更を作成できます。また、一部の構(gòu)成ではプロパティが異なる効果を生み出すこともありますが、畫像の固有の寸法に合わせてCSS幅と高さが必要です。

この記事では、いくつかのCSSのヒントを調(diào)べて、印象的なPicture Hoverアニメーションを作成するのに役立ちます。 「シンプルです！寫真の上に追加の要素を追加して、それは本當(dāng)ですが、追加の要素や擬似要素は使用しません。畫像要素のみを使用すると、その上に何も追加できないように思えるため、これは信じられないほど聞こえるかもしれません。確かに、寫真の上には何も追加しませんが、この効果をスマートにシミュレートします！これが私たちが一緒に探索するものを示すCodePenデモです：

Codepenデモリンク

かっこいいですか？アニメーションを明らかにすることは、わずか數(shù)行のコードで実現(xiàn)できます。追加の要素は必要ありません。その背後にあるミステリーに飛び込みましょう。

初期設(shè)定：

img {
  --s: 200px; /* 圖片大小 */

  width: var(--s);
  height: var(--s);
  box-sizing: border-box;
}

width最初に、畫像サイズを定義します：height aspect-ratio box-sizing: border-boxこれまでのところ、コードは非常に簡(jiǎn)単です。簡(jiǎn)単にするために、正方形の畫像を使用しますが、あらゆるサイズの寫真も使用できます。明示的に

および

を設(shè)定し、を使用したり、畫像のデフォルトサイズを保持したりしないことが非常に重要です。これは私たちのアニメーションにとって必須であり、後でその理由を説明します。また、の使用に注意を払うことも非常に重要です?，F(xiàn)時(shí)點(diǎn)では効果はありませんが、次のステップに進(jìn)み、必要な理由を確認(rèn)しましょう。

box-sizing: border-boxパディングの追加：< 固定サイズが定義され、を使用する畫像にパディングを追加するとどうなりますか？試してみましょう！

Codepenデモリンク上記のデモで見(jiàn)たように、寫真は絞りました。左側(cè)に100pxのパディングを追加しました。これにより、畫像（コンテンツ領(lǐng)域）に100pxのスペースしか殘りません。これが

の効果です。 MDNが説明するように、box-sizing: border-boxは、要素の幅と高さで指定した値の境界とパディングを検討するようブラウザに指示します。要素の幅を100ピクセルに設(shè)定すると、その100ピクセルには、追加された境界線または塗りつぶしが含まれ、コンテンツボックスが収縮して余分な幅を吸収します。 border-box

さあ、パディングが幅に等しいシーンを想像してください。はい、寫真は消えます！以下のデモでは、畫像の上にホバリングして結(jié)果を表示します。

Codepenデモリンク

上記のデモでは、注意すべき2つのポイントがあります。パディングはアニメーション化できますが、これはクールで、畫像サイズを定義するときに以前に使用されたCSS変數(shù)の重要性を確認(rèn)することもできます。同じ変數(shù)を使用してパディングを定義するため、同じ?jìng)帳蚶Rり返す必要はありません。

背景色の追加：

前の例を取り、背景を追加しましょう。

Codepenデモリンク

私たちは目標(biāo)に近づき始めています。背景は、要素全體を論理的にカバーします。寫真の下には見(jiàn)えません（透明な寫真を使用しない限り）が、塗りつぶし領(lǐng)域で見(jiàn)ることができます。私たちの目標(biāo)は畫像を明らかにすることですので、まずパディングを追加してから、ホバリング時(shí)に0に設(shè)定しましょう。

Codepenデモリンク

これはまだ私たちが望む効果ではありませんが、私たちはどんどん近づいています！ 「?jìng)韦巍姑鳏椁圣ⅴ衰岍`ションを完璧にするために、1つの成分が必要です！

オブジェクトフィットとオブジェクトポジションの追加：

欠落している部分は、畫像が絞られないことを避けることであり、ここに最後のトリックがあります。

およびobject-fit値を使用します。 MDNが説明するように：コンテンツを交換すると、要素のコンテンツボックス全體を埋めながら、アスペクト比を維持するためにサイズを変更します。オブジェクトのアスペクト比がボックスのアスペクト比と一致しない場(chǎng)合、オブジェクトは収まるようにトリミングされます。 cover

ここには2つの重要なポイントがあります：

「コンテンツの交換サイズの交換」アスペクト比を維持します」。これは、絵が絞られないが、その固有の割合を維持することを意味します。正方形の寫真を使用しているので、正方形を保ちます。
「要素のコンテンツボックス全體を埋めます...収まるようにトリミングされます」。畫像はすべてのコンテンツ領(lǐng)域（塗りつぶしを追加することで削減された領(lǐng)域）を埋める必要がありますが、內(nèi)部に収まらない場(chǎng)合はトリミングします。

以下のデモで試してみましょう。

Codepenデモリンク

見(jiàn)ましたか？寫真はもう絞られていません！パディングを追加/削除しながら、コンテンツ領(lǐng)域內(nèi)の割合を維持します。わかりました、そのため、効果は最初のプレゼンテーションとは異なると思うかもしれません。寫真は奇妙に動(dòng)きます。それは正しい。だから今、私たちはobject-positionに頼ります。デフォルトの値はcenterであるため、畫像は常にコンテンツ領(lǐng)域の中心にあり、內(nèi)部に収まるようにトリミングされます。そのため、アニメーションで動(dòng)きます。次に行う必要があることは、簡(jiǎn)単に予測(cè)できるはずです。場(chǎng)所を変更して、寫真が動(dòng)かないことを確認(rèn)します。左からパディングを追加します。そのため、畫像の位置を右にピン留めするためにobject-position: rightを使用する必要があります。 Codepenデモリンク

明らかなアニメーションが完了しました！寫真の上にオーバーレイや余分な要素は必要ありません。シンプルな背景色といくつかの畫像の位置決めのヒントを使用することで、少量のシンプルなコードを備えた美しい明らかなアニメーションを?qū)g現(xiàn)しました。充填方向とobject-positionを調(diào)整することで、方向を簡(jiǎn)単に更新できます。これが4つの方向を含む前のものからの最初のデモです。 Codepenデモリンク

以下は、使用するCSSです

img {
  --s: 200px; /* 圖片大小 */

  width: var(--s);
  height: var(--s);
  box-sizing: border-box;
}

その他のアニメーションが明らかになりました：

同じアイデアを使用して、トリックを拡張してより多くの変更を作成できます。片側(cè)からパディングを追加/削除する代わりに、両側(cè)またはすべての側(cè)にパディングを追加/削除することができます。

Codepenデモリンク

上記のコードを確認(rèn)した場(chǎng)合、前のコードと大きな違いがあることはわかりません。私たちがしたことは、同じ効果のより多くのバリエーションを作成するために、異なる塗りつぶし構(gòu)成をセットアップすることだけでした。最初と最後の例では、トリックを持つために

の代わりにobject-fit: noneを使用します。これらの場(chǎng)合、塗りつぶしはコンテンツ領(lǐng)域の幅と高さを0に減らしますが、他のすべての場(chǎng)合、高さまたは幅を減らすだけです。この構(gòu)成では、object-fit: coverは機(jī)能しませんが、coverは仕事をすることができます。 MDN注：交換コンテンツはサイズ変更されません。 none

なぜ私たちは常に

を使用しないのですか？使用できますが、機(jī)能しますが、小さな欠點(diǎn)があります。 none畫像の固有の寸法が考慮されるため、CSS幅と高さを、手法が有効にするための固有の寸法に等しいようにする必要があります。一方、は寫真のスケールのみを保持し、畫像のサイズをサイズに変更するため、畫像のCSSサイズを安全に定義できます。これは比較であるため、違いを確認(rèn)できます。 Codepenデモリンクnonecoverどちらの場(chǎng)合もアニメーションが表示されますが、

を使用すると、畫像がサイズを変更せず、デフォルトサイズ（500x500）を保持しますが、これは良くありません。 object-fit: none割合のみを維持すると、畫像はボックスサイズに合わせてサイズ変更されます。 object-fit: cover

結(jié)論：

この小さなCSS実験を楽しんだことを願(yuàn)っています。シンプルなトリックと數(shù)行のコードを使用して、

要素だけでクールな公開アニメーションを?qū)g裝しました。また、同じコード構(gòu)造を使用して多くの変更を加えました。このテクニックでさらにできることがあります。ホバリング中に黒と白の畫像をカラー畫像に変換する最後の例を殘します。 <img alt="CSSを追加する方法あなたの畫像にアニメーションを明らかにします" >Codepenデモリンク

私はあなたにもっと美しいアニメーションを探求し、見(jiàn)つけようとします！

以上がCSSを追加する方法あなたの畫像にアニメーションを明らかにしますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。