ホームページ > ウェブフロントエンド > CSSチュートリアル > CSSを追加する方法あなたの画像にアニメーションを明らかにします

CSSを追加する方法あなたの画像にアニメーションを明らかにします

Jennifer Aniston
リリース: 2025-02-09 08:31:11
オリジナル
791 人が閲覧しました

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: coverobject-position: right
      CSSを実装するには、追加の要素や擬似要素のないアニメーションを実装するために
  • のみ
  • 要素が必要です。 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パディングの追加:< 固定サイズが定義され、を使用する画像にパディングを追加するとどうなりますか?試してみましょう!

Codepenデモリンク<🎜><🎜>上記のデモで見たように、写真は絞りました。左側に100pxのパディングを追加しました。これにより、画像(コンテンツ領域)に100pxのスペースしか残りません。これが

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

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

Codepenデモリンク

上記のデモでは、注意すべき2つのポイントがあります。パディングはアニメーション化できますが、これはクールで、画像サイズを定義するときに以前に使用されたCSS変数の重要性を確認することもできます。同じ変数を使用してパディングを定義するため、同じ値を繰り返す必要はありません。

背景色の追加:

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

Codepenデモリンク

私たちは目標に近づき始めています。背景は、要素全体を論理的にカバーします。写真の下には見えません(透明な写真を使用しない限り)が、塗りつぶし領域で見ることができます。私たちの目標は画像を明らかにすることですので、まずパディングを追加してから、ホバリング時に0に設定しましょう。

Codepenデモリンク

これはまだ私たちが望む効果ではありませんが、私たちはどんどん近づいています! 「偽の」明らかなアニメーションを完璧にするために、1つの成分が必要です!

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

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

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

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

    「コンテンツの交換サイズの交換」アスペクト比を維持します」。これは、絵が絞られないが、その固有の割合を維持することを意味します。正方形の写真を使用しているので、正方形を保ちます。
  • 「要素のコンテンツボックス全体を埋めます...収まるようにトリミングされます」。画像はすべてのコンテンツ領域(塗りつぶしを追加することで削減された領域)を埋める必要がありますが、内部に収まらない場合はトリミングします。
以下のデモで試してみましょう。

Codepenデモリンク

見ましたか?写真はもう絞られていません!パディングを追加/削除しながら、コンテンツ領域内の割合を維持します。わかりました、そのため、効果は最初のプレゼンテーションとは異なると思うかもしれません。写真は奇妙に動きます。それは正しい。だから今、私たちは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;
}
ログイン後にコピー
ログイン後にコピー

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

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

Codepenデモリンク

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

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

なぜ私たちは常に

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

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

結論:

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

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

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

以上がCSSを追加する方法あなたの画像にアニメーションを明らかにしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート