純粋な CSS を使用して、Web ページの背景画像をズームインおよびズームアウトするスムーズなスクロール効果を実現する方法

純粋な CSS を使用して Web ページの背景画像のスムーズなスクロール効果を実現する方法

現代の Web デザインでは、背景画像は最も一般的な要素の 1 つです。 Web ページの視覚効果を向上させるために、CSS を使用して背景画像のスムーズなスクロール ズーム効果を実現し、それによってユーザーに優れたブラウジング エクスペリエンスを提供できます。

まず、この効果を持つコンテナ要素を HTML で作成します:

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

次に、CSS を使用してコンテナ要素のスタイルを設定し、背景画像の拡大縮小効果のスムーズなスクロールを実現する必要があります:

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

上記のコードにより、マウスを背景コンテナの上に置くと、背景画像がスムーズに 1.2 倍に拡大縮小されるという効果が得られました。必要に応じてスケーリングとトランジション時間を調整して、さまざまな効果を実現できます。

さらに、CSS アニメーション プロパティを通じて自動スクロール効果を実現することもできます。たとえば、背景画像を自動的に拡大し、一定時間内に縮小させて、周期的な動的効果を形成することができます。以下はサンプル コードです。

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

上記のコードにより、背景画像が 8 秒以内に周期的に 1.2 倍に拡大され、その後元のサイズに縮小されるという効果が得られます。

一般に、純粋な CSS を通じて Web ページの背景画像のスムーズなスクロール効果を実現すると、Web ページの視覚的な魅力とユーザー エクスペリエンスを向上させることができます。 CSS スタイルとアニメーション プロパティを柔軟に使用して、独自のニーズと創造性に応じて、よりユニークな効果を実現できます。

以上が純粋な CSS を使用して、Web ページの背景画像をズームインおよびズームアウトするスムーズなスクロール効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。