Hiasan gambar mewah: topeng dan kesan hover maju

Ini adalah bahagian 2 dari siri tiga bahagian mengenai kerajinan hiasan imej yang menakjubkan dengan hanya menggunakan elemen

dan CSS. Membina pada bahagian 1, kami akan terus meneroka kecerunan dan memperkenalkan harta <img alt="Hiasan gambar mewah: topeng dan kesan hover maju" > untuk mencapai kesan yang lebih rumit dan animasi hover. mask

Gambaran Keseluruhan Siri Hiasan Imej Fancy

Single Element Magic
topeng dan kesan hover lanjutan (anda di sini!)
menggariskan dan animasi kompleks

mari kita menyelam ke dalam contoh pertama kita:

kesan setem pos

menghairankan, kesan ini hanya memerlukan dua kecerunan dan penapis:

img {
  --r: 10px; /* Circle radius */
  padding: calc(2 * var(--r));
  filter: grayscale(.4);
  background: 
    radial-gradient(var(--r),#0000 98%,#fff) round
      calc(-1.5 * var(--r)) calc(-1.5 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)),
    linear-gradient(#fff 0 0) no-repeat
      50% / calc(100% - 3 * var(--r)) calc(100% - 3 * var(--r));
}

Padding mencipta ruang untuk kecerunan latar belakang. Gabungan

dan radial-gradient() bijak memotong bahagian bulat di sekeliling imej. Nilai linear-gradient() memastikan penjajaran sempurna tanpa mengira dimensi imej. round

bingkai bulat

Contoh ini menggunakan

untuk membuat lingkaran radial-gradient() sekitar imej, menggunakan nilai untuk saiz yang konsisten. Jurang telus antara bingkai dan imej dicapai menggunakan harta round: mask

img {
  --s: 20px; /* Frame size */
  --g: 10px; /* Gap size */
  --c: #FA6900; 

  padding: calc(var(--g) + var(--s));
  background: 
    radial-gradient(farthest-side, var(--c) 97%, #0000) 
      0 0 / calc(2 * var(--s)) calc(2 * var(--s)) round;
  mask:
    conic-gradient(from 90deg at calc(2 * var(--s)) calc(2 * var(--s)), #0000 25%, #000 0)
      calc(-1 * var(--s)) calc(-1 * var(--s)),
    linear-gradient(#000 0 0) content-box;
}

menggabungkan mask dan conic-gradient() untuk mendedahkan imej dan bingkai, menutup jurang di antara mereka. linear-gradient()

sempadan telus dalaman

Teknik ini mewujudkan sempadan telus

di dalam imej menggunakan untuk bahagian dalaman dan linear-gradient() untuk luar, dengan jarak mencipta kesan telus. conic-gradient()

img {
  --b: 5px;  /* Border thickness */
  --d: 20px; /* Distance from edge */

  --_g: calc(100% - 2 * (var(--d) + var(--b)));
  mask:
    conic-gradient(from 90deg at var(--d) var(--d), #0000 25%, #000 0)
      0 0 / calc(100% - var(--d)) calc(100% - var(--d)),
    linear-gradient(#000 0 0) 50% / var(--_g) var(--_g) no-repeat;
}

sintaksis kecerunan berganda boleh mencapai hasil yang sama; Pendekatan terbaik mengutamakan kesimpulan dan kebolehkerjaan.

Kesan hover ditambah dengan menggunakan helah

untuk menghidupkan sifat-sifat yang tidak dapat diubahsuai font-size. mask

bingkai mendedahkan animasi

Bahagian ini dibina pada contoh -contoh sebelumnya, bergerak kecerunan dari harta

ke harta background dan menambah mask untuk sempadan. Kesan hover dicapai dengan menyesuaikan repeating-linear-gradient() atau mask-position. mask-size

Contoh selanjutnya menunjukkan animasi pelbagai langkah yang lebih kompleks, mencabar pembaca untuk menganalisis dan memahami interaksi kecerunan dan topeng.

Kesimpulan

Bahagian siri ini mempamerkan kuasa kecerunan dan harta

untuk mencipta hiasan dan animasi imej yang canggih menggunakan elemen tunggal mask. Bahagian 3 akan menyelidiki garis besar dan animasi yang lebih kompleks. Demo bonus dengan kesan imej yang rosak disediakan. <img alt="Hiasan gambar mewah: topeng dan kesan hover maju" >

Gambaran Keseluruhan Siri Hiasan Imej Fancy

• Single Element Magic
• topeng dan kesan hover lanjutan (anda di sini!)
• menggariskan dan animasi kompleks

Atas ialah kandungan terperinci Hiasan gambar mewah: topeng dan kesan hover maju. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!