純粋な CSS を通じて画像カルーセル効果を実現する方法とテクニック

純粋な CSS を通じて画像カルーセル効果を実現する方法とテクニック

現代の Web デザインでは、複数の画像や広告のローテーションを表示するために画像カルーセル効果がよく使用されます。画像カルーセル効果を実現するにはさまざまな方法がありますが、一般的な方法の 1 つは CSS アニメーションを使用することです。この記事では、純粋な CSS を通じて画像カルーセル効果を実現する方法とテクニックを紹介し、具体的なコード例を示します。

1. HTML の構造

まず、カルーセルの画像要素を HTML で用意する必要があります。以下は、単純な HTML 構造の例です。

<div class="carousel">
  <img  src="/static/imghwm/default1.png"  data-src="image1.jpg"  class="lazy" alt="純粋な CSS を通じて画像カルーセル効果を実現する方法とテクニック" >
  <img  src="/static/imghwm/default1.png"  data-src="image2.jpg"  class="lazy" alt="純粋な CSS を通じて画像カルーセル効果を実現する方法とテクニック" >
  <img  src="/static/imghwm/default1.png"  data-src="image3.jpg"  class="lazy" alt="純粋な CSS を通じて画像カルーセル効果を実現する方法とテクニック" >
</div>

この例では、カルーセル コンテナのキャリアとして <div> 要素を使用し、複数の <code><img alt="純粋な CSS を通じて画像カルーセル効果を実現する方法とテクニック" > 要素をカルーセル画像として使用します。 <p>2. CSS スタイル</p> <p>次に、画像カルーセルの CSS スタイルを設定する必要があります。画像カルーセル効果を実現するために必要な基本的な CSS スタイルは次のとおりです。 </p><pre class='brush:php;toolbar:false;'>.carousel { width: 500px; /* 设置轮播容器的宽度 */ height: 300px; /* 设置轮播容器的高度 */ overflow: hidden; /* 隐藏超出容器范围的内容 */ position: relative; /* 设置轮播容器为相对定位，以便定位轮播元素 */ } .carousel img { width: 100%; /* 设置轮播图片为容器的百分百宽度 */ height: auto; /* 高度自适应，保持原始图片比例 */ position: absolute; /* 设置轮播图片为绝对定位，以便实现叠加效果 */ } </pre><p> この例では、カルーセル コンテナー <code>.carousel と overflow に固定の幅と高さを追加しました。 : hiddenAttribute を使用すると、コンテナのスコープを超えたコンテンツを非表示にすることができます。また、画像の幅がコンテナに適合するようにカルーセル画像 .carousel img の幅を 100% に設定し、オーバーレイ効果を実現するために画像を絶対配置に設定します。

3. CSS アニメーション

次に、CSS アニメーションを使用して、画像カルーセルの切り替え効果を実現する必要があります。以下は、@keyframes を使用して宣言された CSS アニメーションの例です。

@keyframes carousel-animation {
  0% { left: 0; }  /* 初始状态，图片位于容器最左边 */
  25% { left: -500px; }  /* 图片向左移动一个容器宽度的距离 */
  50% { left: -1000px; }  /* 图片继续向左移动一个容器宽度的距离 */
  75% { left: -1500px; }  /* 图片继续向左移动一个容器宽度的距离 */
  100% { left: 0; }  /* 图片回到初始位置 */
}

.carousel img {
  animation: carousel-animation 10s infinite;  /* 应用动画，持续10秒，无限循环 */
}

この例では、@keyframes キーワードを使用して # # という名前のアニメーションを宣言します。 #carousel-animation アニメーション。さまざまな時点でのアニメーションのステータスを定義します。 left 属性の値を徐々に変更して、画像がコンテナ内で水平に移動できるようにして、カルーセル効果を実現します。最後に、このアニメーションを .carousel img に適用し、アニメーションの長さを 10 秒、ループ数を無限に設定しました。

4. 概要

上記の HTML 構造と CSS スタイル、および CSS アニメーションを使用して実現される画像カルーセル効果により、Web ページ上で複数の画像の切り替え効果を簡単に表示できます。 . .コンテナのサイズ、画像の位置、アニメーションのパラメータを調整することで、カスタマイズされた画像カルーセル効果を実現できます。

上記は、純粋な CSS を通じて画像カルーセル効果を実現する方法とテクニックの紹介です。この記事が、Web デザインで画像カルーセル効果を使用する際のヒントになれば幸いです。