Petua dan kaedah untuk mencapai kesan zum masuk dan zum keluar imej dengan CSS

Petua dan kaedah untuk mencapai kesan zum masuk dan zum keluar imej dengan CSS

Dalam reka bentuk web, menambah elemen imej adalah operasi yang sangat biasa. Untuk meningkatkan pengalaman pengguna, adalah penting untuk mencapai beberapa kesan khas. Artikel ini akan memperkenalkan beberapa teknik dan kaedah menggunakan CSS untuk mencapai kesan zum masuk dan keluar imej, dan memberikan contoh kod khusus.

1. Gunakan atribut transform untuk mencapai kesan penskalaan imej

Atribut transformasi ialah salah satu kaedah yang disediakan dalam CSS3 untuk mengubah elemen, dan fungsi skala() boleh digunakan untuk mencapai kesan penskalaan imej. Dengan menetapkan nilai skala kurang daripada 1, imej boleh dikurangkan, dan dengan menetapkan nilai skala lebih daripada 1, imej boleh diperbesarkan.

Berikut ialah contoh khusus yang mencapai kesan pembesaran imej sebanyak 1.2 kali apabila tetikus melayang di atasnya:

.img-box{
  position: relative;
  overflow: hidden;
  width: 200px;
  height: 200px;
}

.img-box img{
  position:absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease-in-out;
}

.img-box:hover img{
  transform: scale(1.2);
}

Dalam kod di atas, kami mula-mula mencipta elemen bekas dan menggunakan kedudukan: relatif< /code> untuk menetapkan kedudukan relatif. Lebar dan tinggi di sini boleh dilaraskan mengikut keadaan sebenar. position: relative来设置相对定位。这里的宽度和高度可以根据实际情况进行调整。

然后，在容器中插入图片元素，使用position: absolute将其设置为绝对定位，并设置了宽度和高度都为100%，以充满整个容器。

接着，我们使用transition属性来设置图片过渡效果的持续时间和动画曲线。

最后，在鼠标悬停容器元素时，利用:hover选择器对图片元素进行缩放变化，通过设置transform: scale(1.2)

Kemudian, masukkan elemen gambar dalam bekas, gunakan kedudukan: mutlak untuk menetapkannya kepada kedudukan mutlak, dan tetapkan lebar dan tinggi kepada 100% untuk mengisi keseluruhan bekas.

Seterusnya, kami menggunakan atribut transition untuk menetapkan tempoh dan lengkung animasi bagi kesan peralihan imej.

Akhir sekali, apabila tetikus melayang di atas elemen bekas, gunakan pemilih :hover untuk menskalakan elemen imej dan tetapkan transform: scale(1.2) untuk mencapai pembesaran imej 1.2 kali.

2. Gunakan atribut animasi untuk mencapai kesan zum imej

Selain menggunakan atribut transformasi, kami juga boleh menggunakan atribut animasi CSS3 dan bingkai utama (@keyframes) untuk mencapai kesan zum imej. Berikut ialah contoh terperinci:

@keyframes zoom{
  from{
    transform: scale(1);
  }
  to{
    transform: scale(1.2);
  }
}

.img-box{
  position: relative;
  overflow: hidden;
  width: 200px;
  height: 200px;
  animation: zoom 0.3s ease-in-out infinite alternate;
}

Dalam kod di atas, kami mula-mula mentakrifkan animasi bernama zum melalui @keyframes keyframes. Dua bingkai utama ditetapkan, iaitu dari dan ke, yang merupakan gaya pada permulaan dan akhir.

Kemudian, dalam gaya elemen bekas, gunakan atribut animasi untuk merujuk animasi dan tetapkan tempoh, lengkung animasi dan kaedah gelung animasi.

Gunakan infinite untuk mewakili main balik gelung animasi, dan ganti untuk mewakili main balik animasi secara bergilir-gilir, iaitu, zum masuk dahulu dan kemudian zum keluar.

Perlu diambil perhatian bahawa sama ada kita menggunakan atribut transform atau atribut animasi untuk mencapai kesan penskalaan imej, kita perlu menetapkan lebar dan ketinggian yang sesuai untuk elemen kontena, dan kita perlu menetapkan overflow:hidden untuk menyembunyikan bahagian yang melebihi saiz bekas. 🎜🎜Ringkasan: 🎜🎜Mencapai kesan pembesaran dan pengurangan imej melalui CSS ialah teknik yang biasa digunakan dalam reka bentuk web. Artikel ini memperkenalkan dua kaedah menggunakan atribut transform dan atribut animasi Melalui contoh kod sebenar, saya berharap ia dapat membantu pembaca menguasai teknik dan kaedah ini dengan lebih baik dan menggunakannya secara fleksibel pada projek sebenar. 🎜

Atas ialah kandungan terperinci Petua dan kaedah untuk mencapai kesan zum masuk dan zum keluar imej dengan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!