How to achieve the smooth scrolling effect of zooming in and out of background images on web pages through pure CSS

How to achieve the smooth scrolling background image zooming effect of web pages through pure CSS

In modern web design, background images are one of the most common elements. In order to improve the visual effect of the web page, we can use CSS to achieve a smooth scrolling zooming effect of the background image, thereby giving users a better browsing experience.

First, create a container element with this effect in HTML:

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

Next, we need to use CSS to style the container element and achieve smooth scrolling of the background image amplification Shrinking effect:

.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，实现放大效果 */
}

Through the above code, we have achieved the effect that when the mouse hovers over the background container, the background image will be smoothly scaled to 1.2 times. You can adjust the scaling and transition time as needed to achieve different effects.

In addition, we can also achieve the automatic scrolling effect through CSS animation properties. For example, we can let the background image automatically enlarge and then shrink within a certain period of time, forming a cyclic dynamic effect. The following is a sample 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);
  }
}

Through the above code, we achieve the effect of the background image being cyclically enlarged to 1.2 times within 8 seconds, and then reduced back to the original size.

In general, realizing the smooth scrolling background image zooming effect of web pages through pure CSS can improve the visual appeal and user experience of web pages. You can flexibly use CSS styles and animation properties to achieve more unique effects according to your own needs and creativity.

The above is the detailed content of How to achieve the smooth scrolling effect of zooming in and out of background images on web pages through pure CSS. For more information, please follow other related articles on the PHP Chinese website!