Buat Kesan Mengungkap Imej-Hanya CSS dengan Sempadan Telus
A Imej CSS sahaja mendedahkan kesan boleh diselesaikan dengan cara yang berbeza. Ia sebenarnya agak mudah untuk kod reka bentuk di mana imej menonjol (dilimpahi oleh) latar belakang pepejalnya -anda hanya letakkan imej lebih daripada elemen yang lebih kecil dengan latar belakang yang padat.
Anda boleh mendapatkan hasil yang sama jika anda menggunakannya sempadan telus, di mana anda menyimpan saiz elemen latar belakang yang sama sebagai latar depan dan menambah sempadan telus supaya buat ruang kosong untuk latar depan melimpah ke dalam.
Disana ada beberapa kelebihan dalam menggunakan kaedah yang kedua. Memandangkan ia adalah sempadan telus yang menyediakan kawasan untuk latar depan untuk melimpah ke dalam, kita boleh mengawal arah limpahan antara perbatasan kiri, kanan, atas dan bawah. Juga, mempunyai saiz yang sama untuk latar depan dan latar belakang menjadikannya lebih mudah untuk menggerakkan kedua-dua unsur pada masa yang sama di seluruh halaman.
Secara ringkasnya, kita akan melihat bagaimana mewujudkan imej CSS sahaja mendedahkan kesan menggunakan a latar belakang pepejal yang lebih kecil dengan imej latar hadapan yang mempunyai sempadan telus. Anda boleh menyemak demo akhir di bawah.
1. Buat kod permulaan
Bijak HTML, hanya satu Dalam CSS, kami gunakan dua pembolehubah CSS, Kami juga menambah Kami tambah kosong The Kami menambah imej kepada The Pada tangkapan skrin di bawah anda boleh melihat apa yang kami ada setakat ini ( Untuk menambah latar belakang yang lebih kecil (slaid) di belakang imej, kita akan menggunakan unsur pseudo yang lain, Kami membuat pembolehubah CSS yang lain, The lebar dikira sebagai The ketinggian dikira sebagai Dengan Penapis CSS dari Inilah yang tangkapan skrin demo diberikan setakat ini (dengan Kami tambahkan Seperti kita telah menambah Di bawah, anda boleh melihat demo akhir. Jika anda memaparkan
--bgc dan --red untuk warna latar belakang dan juga dimensi daripada .foo bekas, masing-masing. Contohnya, saya menggunakan nilai yang sama untuk lebar dan ketinggian untuk mendapatkan kotak berbentuk persegi, buat pembolehubah berasingan untuk ketinggian dan lebar jika anda mahu segi empat tepat.kedudukan: saudara memerintah .foo, jadi unsur-unsur pseudo-nya, yang akan kita gunakan mendedahkan imej, boleh jadi benar-benar diposisikan (lihat di bawah), dan dengan itu disusun atas satu sama lain. .foo --bgc: # FFCC03; --dim: 300px; lebar: var (- red); tinggi: var (- dim); warna latar belakang: var (- bgc); kedudukan: relatif;
kandungan harta kepada kedua-dua elemen pseudo, .foo :: sebelum ini dan .foo :: after, untuk mendapatkannya dengan betul. .foo :: before, .foo :: after content: "; position: absolute; left: 0; top: 0;
.foo elemen, dua elemen pseudo-nya, .foo :: sebelum ini, .foo :: after, dan mereka : berlegar pseudo-classes mendapat peralihan harta itu akan tambah peralihan mudah dalam kepada mereka selama 500 milidetik (setengah saat). .foo, .foo: hover, .foo :: before, .foo :: after, .foo: hover :: before, .foo: hover :: after transition: transform 500ms easy-in;
2. Tambah imej
.foo :: sebelum ini pseudo-element sebagai imej latar belakang, dan saiznya untuk menampung seluruh elemen pseudo dengan lebar dan ketinggian hartanah. Kami tumpukan ia betul-betul di bawah .foo elemen menggunakan z-indeks: -1 peraturan. .foo :: sebelum width: 100%; ketinggian: 100%; latar belakang: url (camel.png) pusat / sampul; z-indeks: -1;
pusat kata kunci pusat imej, Sementara penutup kata kunci skala imej kepada meliputi keseluruhan elemen sambil mengekalkan nisbah aspeknya. z-indeks dikeluarkan dari .foo :: sebelum ini supaya dapat dilihat):
3. Tambah latar belakang slaid
.foo :: after.--b, untuk lebar sempadan. Kami beri tiga sempadan telus kepada :: selepas pseudo-element: atas, kanan dan bawah. .foo :: after --b: 20px; lebar: calc (100% - var (- b)); tinggi: calc (100% - calc (var (- b) * 2)); sempadan: var (- b) pepejal telus; border-left: none; box-shadow: inset 0 var (- dim) 0 var (- bgc); penapis: kecerahan (.8); z-indeks: -2;
calc (100% - var - b)) yang pulangan jumlah lebar .foo tolak lebar lebar sempadan mendatarnya (sempadan kanan sahaja, kerana tidak ada sempadan kiri).calc (100% - calc (var (- b) * 2)) yang pulangan ketinggian keseluruhan .foo tolak lebar lebar sempadan menegaknya (sempadan atas dan bawah).kotak-bayang harta, kita juga tambah bayang hamparan mendatar saiz yang sama seperti .foo (iaitu var (- dim)).kecerahan (.8) gelap warna latar belakang sedikit, dan akhirnya, z-indeks: -2 peraturan tempatkan :: selepas pseudo-element di bawahnya :: sebelum ini yang mengandungi imej.z-indeks dikeluarkan dari kedua-dua unsur-unsur pseudo supaya dapat dilihat):
4. Tambah transformasi
ubah harta kepada kedua-dua unsur-unsur pseudo, jadi apabila pengguna melayang .foo, kedua-dua elemen pseudo adalah bergerak mendatar.peralihan harta kepada semua elemen pada akhir Langkah 1, pergerakan imej dan latar belakangnya kedua-duanya animasi. .foo: hover :: before, .foo: hover :: after transform: translateX (100%);
Bonus: Margin pilihan
.foo sebelah unsur lain pada halaman dan mahu unsur-unsur lain ini berpindah apabila imej dan latar belakangnya keluar, kemudian tambah margin kanan lebar yang sama dengan .foo kepada .foo: hover elemen. .foo: hover margin-right: var (- dim);
