Comment obtenir l'effet de défilement fluide du zoom avant et arrière sur les images d'arrière-plan sur les pages Web via du CSS pur

Comment obtenir l'effet de zoom de l'image d'arrière-plan à défilement fluide des pages Web grâce à du CSS pur

Dans la conception Web moderne, les images d'arrière-plan sont l'un des éléments les plus courants. Afin d'améliorer l'effet visuel de la page Web, nous pouvons utiliser CSS pour obtenir un effet de zoom à défilement fluide de l'image d'arrière-plan, offrant ainsi aux utilisateurs une meilleure expérience de navigation.

Tout d'abord, créez un élément conteneur avec cet effet en HTML :

<div class="background-container">
  ...
</div>

Ensuite, nous devons utiliser CSS pour styliser l'élément conteneur et obtenir un effet de zoom avant et arrière sur l'image d'arrière-plan à défilement fluide :

.background-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh; /* 设置容器元素的高度为视口的高度 */
  background-image: url(path/to/image.jpg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.background-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: inherit;
  background-size: cover;
  background-position: center center;
  opacity: 0.2; /* 背景图片的透明度 */
  transform: scale(1); /* 设置背景图片的初始缩放比例为1 */
  transition: transform 0.4s ease-in-out; /* 使用过渡效果实现平滑滚动 */
}

.background-container:hover::before {
  transform: scale(1.2); /* 设置背景图片的初始缩放比例为1.2，实现放大效果 */
}

Par le code ci-dessus, nous avons obtenu l'effet suivant : lorsque la souris survole le conteneur d'arrière-plan, l'image d'arrière-plan sera mise à l'échelle en douceur jusqu'à 1,2 fois. Vous pouvez ajuster la mise à l'échelle et le temps de transition selon vos besoins pour obtenir différents effets.

De plus, nous pouvons également obtenir l'effet de défilement automatique grâce aux propriétés d'animation CSS. Par exemple, nous pouvons laisser l’image d’arrière-plan s’agrandir puis se rétrécir automatiquement au cours d’une certaine période de temps, formant ainsi un effet dynamique cyclique. Voici un exemple de code :

.background-container::before {
  /* 其他样式省略 */
  animation: scale-animation 8s infinite alternate; /* 利用动画实现自动放大缩小效果 */
}

@keyframes scale-animation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

Grâce au code ci-dessus, nous obtenons l'effet d'une image d'arrière-plan agrandie cycliquement jusqu'à 1,2 fois en 8 secondes, puis réduite à sa taille d'origine.

En général, obtenir l'effet de zoom de l'image d'arrière-plan à défilement fluide des pages Web grâce à du CSS pur peut améliorer l'attrait visuel et l'expérience utilisateur des pages Web. Vous pouvez utiliser de manière flexible les styles CSS et les propriétés d'animation pour obtenir des effets plus uniques en fonction de vos propres besoins et de votre créativité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!