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)

@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;
}