如何通过纯CSS实现网页的平滑滚动背景图片放大缩小效果

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

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

.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);  }}