ホームページ > 記事 > ウェブフロントエンド > 純粋な 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 サイトの他の関連記事を参照してください。