Cara Menambah CSS Mendedahkan Animasi ke Gambar Anda

CLEVERLY Gunakan CSS untuk mencapai imej yang melayang dan mendedahkan kesan animasi tanpa elemen tambahan! Artikel ini akan meneroka secara mendalam cara menggunakan hanya <img src="https://img.php.cn/upload/article/000/000/000/173906107393958.jpg" alt="bagaimana untuk menambah a CSS mendedahkan animasi pada imej anda "> <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="Cara Menambah CSS Mendedahkan Animasi ke Gambar Anda" >
• mata teras: object-fit: cover object-position: right
hanya
• unsur-unsur diperlukan untuk melaksanakan CSS mendedahkan animasi tanpa unsur-unsur tambahan atau elemen pseudo. object-fit: none
Kunci untuk animasi adalah: Tambah padding ke imej, kemudian secara beransur -ansur mengurangkannya menjadi sifar ketika melayang, sambil menggunakan warna latar belakang untuk menghasilkan kesan visual imej yang diturunkan. Ciri -ciri

dan

digunakan untuk mengekalkan nisbah aspek gambar dan mencegah gambar bergerak semasa animasi. <img alt="Cara Menambah CSS Mendedahkan Animasi ke Gambar Anda" > Dengan menyesuaikan arah padding, anda boleh mengembangkan kesan animasi dan membuat lebih banyak perubahan. sifat juga boleh menghasilkan kesan yang berbeza dalam beberapa konfigurasi, tetapi memerlukan lebar dan ketinggian CSS untuk memadankan dimensi yang wujud dari imej.

Artikel ini akan meneroka beberapa petua CSS untuk membantu anda membuat animasi hover gambar yang mengagumkan. Anda mungkin berfikir, "Ia mudah! Tambah elemen tambahan di atas gambar ke animasi." Ini mungkin terdengar luar biasa kerana hanya menggunakan elemen imej, nampaknya tiada apa yang boleh ditambah di atasnya. Sesungguhnya, kami tidak menambah apa -apa di atas gambar, tetapi kami dengan bijak mensimulasikan kesan ini! Berikut adalah demo codepen yang menunjukkan apa yang akan kita pelajari bersama:

pautan demo codepen

tidak sejuk? Mengungkap animasi boleh dicapai dengan hanya beberapa baris kod, tiada elemen tambahan diperlukan. Mari kita menyelam misteri di belakangnya.

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

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

Konfigurasi awal:

width height Pertama, tentukan saiz imej: aspect-ratio box-sizing: border-box

Setakat ini, kodnya sangat mudah. Untuk kesederhanaan, kami menggunakan imej persegi, tetapi kami juga boleh menggunakan gambar saiz apa pun. Sangat penting untuk ditetapkan secara eksplisit

dan , jangan gunakan atau mengekalkan saiz lalai imej. Ini adalah satu kemestian untuk animasi kami dan kami akan menjelaskan mengapa kemudian. Ia juga sangat penting untuk memberi perhatian kepada penggunaan

. Ia tidak mempunyai kesan pada masa ini, tetapi mari kita bergerak ke langkah seterusnya dan lihat mengapa ia diperlukan.

box-sizing: border-box Tambah padding:

<🎜> Apa yang berlaku jika kita menambah padding ke imej yang mempunyai saiz tetap yang ditakrifkan dan menggunakan <🎜>? Mari cubalah! <🎜> pautan demo codepen <🎜> <🎜>

Seperti yang kita lihat dalam demo di atas, gambar itu diperas. Kami menambah padding 100px ke kiri, yang akan meninggalkan hanya 100px ruang untuk imej (kawasan kandungan). Ini adalah kesan box-sizing: border-box. Seperti yang dijelaskan oleh MDN: border-box memberitahu penyemak imbas untuk mempertimbangkan mana -mana sempadan dan padding dalam nilai yang anda tentukan untuk lebar dan ketinggian elemen. Jika anda menetapkan lebar elemen kepada 100 piksel, maka 100 piksel akan mengandungi mana -mana sempadan atau mengisi yang anda tambah dan kotak kandungan akan mengecut untuk menyerap lebar tambahan.

Sekarang, bayangkan adegan di mana padding sama dengan lebar. Ya, gambar akan hilang! Dalam demo di bawah, hover ke atas imej untuk melihat hasilnya. pautan demo codepen

Dalam demonstrasi di atas, terdapat dua mata yang perlu diberi perhatian. Padding boleh animasi, yang sejuk, dan kita juga dapat melihat kepentingan pembolehubah CSS yang digunakan lebih awal apabila menentukan saiz imej. Kami menggunakan pembolehubah yang sama untuk menentukan padding, jadi kami tidak perlu mengulangi nilai yang sama.

Tambahkan warna latar:

mari kita ambil contoh sebelumnya dan tambahkan latar belakang. pautan demo codepen

Kami mula mendekati matlamat kami. Latar belakang secara logik akan meliputi seluruh elemen. Kita tidak dapat melihatnya di bawah gambar (kecuali jika kita menggunakan gambar telus), tetapi kita dapat melihatnya di kawasan mengisi. Matlamat kami adalah untuk mendedahkan imej, jadi mari kita mulakan dengan menambah padding dan kemudian tetapkannya kepada 0 ketika melayang - bertentangan dengan apa yang sedang kita lakukan. pautan demo codepen

Ini masih bukan kesan yang kita mahu, tetapi kita semakin dekat! Kami hanya memerlukan satu ramuan untuk menjadikan animasi "palsu" kami sempurna!

Tambahkan objek-fit dan kedudukan objek:

Bahagian yang hilang adalah untuk mengelakkan imej yang diperah, dan di sini adalah helah akhir. Kami akan menggunakan nilai object-fit dan cover. Seperti yang dijelaskan oleh MDN: Gantikan kandungan saiz semula untuk mengekalkan nisbah aspeknya semasa mengisi keseluruhan kotak kandungan elemen. Jika nisbah aspek objek tidak sepadan dengan nisbah aspek kotaknya, objek akan dipotong agar sesuai.

Terdapat dua perkara penting di sini:

• "Gantikan kandungan saiz semula untuk mengekalkan nisbah aspeknya". Ini bermakna gambar itu tidak akan diperah, tetapi akan mengekalkan perkadarannya. Kami menggunakan gambar persegi, jadi ia akan menyimpan dataran.
• "Isi keseluruhan kotak kandungan elemen ... akan dipotong untuk dimuatkan". Imej harus mengisi semua kawasan kandungan (kawasan yang kami kurangkan dengan menambah beberapa mengisi), tetapi jika ia tidak sesuai di dalamnya, kami akan menanamnya.

mari kita cuba dalam demo di bawah. pautan demo codepen

adakah anda melihatnya? Gambar -gambar itu tidak lagi diperah! Ia mengekalkan perkadarannya dalam kawasan kandungan semasa kami menambah/mengeluarkan padding. Ok, jadi kita mungkin berfikir kesannya berbeza daripada persembahan awal. Gambar bergerak pelik. Betul. Jadi sekarang kita beralih kepada object-position. Nilai lalai adalah center, jadi imej akan sentiasa berada di tengah -tengah kawasan kandungan dan akan dipotong untuk dimuatkan di dalamnya. Itulah sebabnya ia bergerak dengan animasi. Apa yang perlu kita lakukan seterusnya harus mudah diramalkan. Kami akan menukar lokasi untuk memastikan gambar tidak bergerak. Kami akan menambah padding dari sebelah kiri, jadi kami harus menggunakan object-position: right untuk memasukkan kedudukan imej ke kanan. pautan demo codepen

animasi mendedahkan kami selesai! Kami tidak memerlukan overlay atau elemen tambahan di atas gambar. Dengan menggunakan warna latar belakang yang mudah dan beberapa petua kedudukan gambar, kami mencapai animasi mendedahkan yang indah dengan sedikit kod mudah. Kita boleh mengemas kini arah dengan mudah dengan menyesuaikan arah mengisi dan object-position. Berikut adalah demonstrasi pertama dari yang sebelumnya, yang mengandungi empat arah. pautan demo codepen

Berikut adalah CSS yang kita gunakan:

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

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

lebih banyak animasi yang diturunkan:

kita boleh menggunakan idea yang sama untuk memperluaskan helah untuk membuat lebih banyak perubahan. Daripada menambah/mengeluarkan padding dari satu sisi, kita boleh menambah/mengeluarkan padding ke kedua -dua belah pihak atau bahkan semua sisi. pautan demo codepen

Jika kita menyemak kod yang ditunjukkan di atas, kita tidak akan mendapati bahawa terdapat perbezaan besar dari yang sebelumnya. Apa yang kami lakukan adalah menubuhkan konfigurasi mengisi yang berbeza untuk membuat lebih banyak variasi kesan yang sama. Dalam contoh pertama dan terakhir, kami menggunakan object-fit: none bukan object-fit: cover untuk mempunyai silap mata. Dalam kes ini, pengisian mengurangkan lebar dan ketinggian kawasan kandungan ke 0, manakala dalam semua kes lain kita hanya mengurangkan ketinggian atau lebar. Dalam konfigurasi ini, cover tidak berfungsi, tetapi none boleh melakukan pekerjaan itu. Nota MDN: Kandungan penggantian tidak akan berubah saiz.

Kenapa kita tidak selalu menggunakan none? Kita boleh menggunakannya, dan ia berfungsi, tetapi ia mempunyai kelemahan kecil. Dimensi yang wujud dalam gambar akan diambil kira, jadi kita perlu membuat lebar dan ketinggian CSS sama dengan dimensi yang wujud untuk teknik yang berkuatkuasa. Sebaliknya, hanya menyimpan skala gambar dan akan mengubah saiz gambar agar sesuai dengan saiz kotak, jadi kami dapat menentukan saiz CSS dengan selamat untuk gambar. Ini adalah perbandingan supaya kita dapat melihat perbezaannya. none pautan demo codepen cover

Dalam kedua -dua kes, kami berdua mendedahkan animasi, tetapi apabila menggunakan object-fit: none, imej tidak mengubah saiz dan menyimpan saiz lalainya (500x500), yang tidak baik. object-fit: cover hanya mengekalkan perkadaran dan imej akan diubah saiznya sesuai dengan saiz kotak.

Kesimpulan:

Saya harap anda menikmati percubaan CSS kecil ini. Menggunakan helah mudah dan beberapa baris kod, kami melaksanakan animasi mendedahkan yang sejuk dengan hanya elemen <img alt="Cara Menambah CSS Mendedahkan Animasi ke Gambar Anda" >. Kami juga membuat banyak perubahan menggunakan struktur kod yang sama. Kita boleh berbuat lebih banyak dengan teknik ini. Saya akan meninggalkan anda dengan contoh terakhir di mana saya menukar imej hitam dan putih ke imej warna semasa melayang. pautan demo codepen

Saya akan membiarkan anda terus meneroka dan cuba mencari animasi yang lebih indah!

Atas ialah kandungan terperinci Cara Menambah CSS Mendedahkan Animasi ke Gambar Anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!