純粋な CSS3 を使用してカルーセル チャートを実装する方法

はじめに

純粋な CSS3 によって実現されるカルーセル効果は、JavaScript によって制御されるカルーセル効果と比較して、はるかにシンプルで効率的ですが、機能もより単一であり、カルーセルのみを手動で切り替えることはできません。

それを達成するには何が使われますか？ページレイアウト+アニメーションアニメーション

HTML部分

<p class="container">
    <p class="title-container">
      <h1>纯CSS3轮播图</h1>
    </p>
    <p class="slide-box">
      <ul>
        <li class="slide-item slide1">
          <a href="#">
          <img src="images/img-1.jpg" alt="">
          <p class="tooltip">
            生活          </p>
          </a>
        </li>
        <li class="slide-item slide2">
          <a href="#">
          <img src="images/img-2.jpg" alt="">
          <p class="tooltip">
            热情          </p>
          </a>
        </li>
        <li class="slide-item slide3">
          <a href="#">
          <img src="images/img-3.jpg" alt="">
          <p class="tooltip">
            乐观          </p>
          </a>
        </li>
        <li class="slide-item slide4">
          <a href="#">
          <img src="images/img-4.jpg" alt="">
          <p class="tooltip">
            美好          </p>
          </a>
        </li>
        <li class="slide-item slide5">
          <a href="#">
          <img src="images/img-5.jpg" alt="">
          <p class="tooltip">
            意义          </p>
          </a>
        </li>
      </ul>
      <p class="progress">

      </p>
    </p>
  </p></body>

HTML部分はやはりアレです、コンテナ+複数のカルーセル画像サブアイテム

レイアウト部分

/*reset*/html,body,p,ul,li,img,h1,a{
  margin: 0;
  padding: 0;
}ul{
  list-style: none;
}/*slide style*/html,body{
  width: 100%;
  height: 100%;
}body{
  background: url('./../images/bg.png') repeat;
}.container{
  width: 1000px;
  height: 100%;
  margin: 0 auto;
}.container .title-container{
  width: 800px;
  height: 100px;
  line-height: 100px;
  margin: 20px auto;
  text-align: center;
}.slide-box{
  position: relative;
  width: 800px;
  height: 533px;
  margin: 0 auto;
  border:5px solid #eaeaea;
    -webkit-box-shadow:1px 1px 5px rgba(0,0,0,0.7);
            box-shadow:1px 1px 5px rgba(0,0,0,0.7);
}.slide-box ul{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}.slide-box ul li{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}.slide-box ul li .tooltip{
  position: absolute;
  left: 50px;
  top: -40px;
  height: 40px;
  width: 100px;
  text-align: center;
  background-color: rgba(0,0,0,0.7);
  color: #fff;
  line-height: 40px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}.slide-box ul li:hover .tooltip{
  top: 2px;
  z-index: 2;
}

1.コンテナのオーバーフロー非表示

2.カルーセル項目の絶対配置

カルーセルアニメーション部分

この部分がこの記事の焦点です。

純粋な CSS3 を使用してカルーセルを実装するには、無限ループでアニメーション アニメーションを使用する必要があり、各サブアイテムのアニメーション効果を個別に制御する必要があり、全体的な効果は完璧なカルーセル効果になります。

子項目は絶対配置を使用し、達成されるカルーセル効果は左から右であるため、左の値を制御して表示と非表示 (コンテナの外に配置することは非表示を意味します) とスライド効果を実現します。まずは最初のサブアイテムを実装します

.slide-box ul li.slide1{
  -webkit-animation: slide1 25s linear infinite; 
          animation: slide1 25s linear infinite;
}@-webkit-keyframes slide1 {
  0%  {
    left: 0;
    opacity: 1;
  }
  16%  {
    left: 0;
    opacity: 1;
  }
  20%  {
    left: 800px;
    opacity: 0;
    z-index: 0;
  }
  21% {
    left: -800px;
    opacity: 0;
    z-index: 0;
  }
  95% {
    left: -800px;
    opacity: 0;
    z-index: 1;
  }
  96% {
    left: -800px;
    opacity: 0;
    z-index: 1;
  }
  100% {
    left: 0;
    opacity: 1;
    z-index: 1;
  }}

デザインカルーセルサイクルは25秒なので、各サブアイテムの表示時間と移動時間は5秒です。サブアイテム 1 のアニメーション効果: 0 ～ 4 秒の表示、4 ～ 5 秒で右にスライドしてコンテナの外に非表示にし、すぐにコンテナの左側にスライドして非表示にします (この時点で z-index が変更されているため、表示されている子項目には影響しません）、残り時間は次のスライドを待って左側に表示されます。全体的な効果が良好になるように、2 番目のサブアイテムのアニメーション効果は、特に時間の点で最初のサブアイテムと一致する必要があります。次のように:

.slide-box ul li.slide2{
  -webkit-animation: slide2 25s linear infinite;
          animation: slide2 25s linear infinite;
}@-webkit-keyframes slide2 {
  0%  {
    left: -800px;
    opacity: 0;
    z-index: 0;
  }
  16%  {
    left: -800px;
    opacity: 0;
    z-index: 1;
  }
  20%  {
    left: 0;
    opacity: 1;
    z-index: 1;
  }
  36% {
    left: 0;
    opacity: 1;
    z-index: 1;
  }
  40% {
    left: 800px;
    opacity: 0;
    z-index: 0;
  }
  41% {
    left: -800px;
    opacity: 0;
    z-index: 0;
  }
  100% {
    left: -800px;
    opacity: 0;
    z-index: 0;
  }}

2 番目のサブアイテムはコンテナの左側の外側で 1 ～ 4 秒待機し、4 ～ 5 秒間右側にスライドアウトします (この時点で、最初のサブアイテムは左側にスライドアウトします)非表示にするには)、5 ～ 9 秒間 9- を表示します。非表示にするには、左に 10 秒間スワイプします。

残りのサブ項目と同様に、アニメーションを順番に調整すると、全体的な効果が非常に滑らかになります。

プログレスバーアニメーション

表示時間が4秒より長いため、プログレスバーを追加すると、インタラクティブなエクスペリエンスが向上します。 HTML の p.progress はプログレス バーの構造です。スタイルは次のとおりです:

.slide-box .progress{
  position: absolute;
  bottom: 0;
  left: 0;
  height: 5px;
  width: 0;
  background-color: rgba(0,0,0,0.7);
  -webkit-animation: progress 5s linear infinite;
          animation: progress 5s linear infinite;
  z-index: 2;
}@-webkit-keyframes progress {
  0%{
    width: 0;
  }
  80%{
    width: 100%;
  }
  81%{
    width: 0;
  }
  100%{
    width: 0;
  }}

幅を制御して進行状況をマークします。

hoverポーズアニメーション

マウスホバー中にアニメーションを一時停止する必要がある場合は、animation-play-state:paused controlを使用してください

.slide-box:hover ul li,
.slide-box:hover .progress{
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}

以上が純粋な CSS3 を使用してカルーセル チャートを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。