순수 CSS3를 사용하여 회전식 차트를 구현하는 방법

머리말

JavaScript로 제어되는 회전판 효과와 비교할 때 순수 CSS3로 구현되는 회전판 효과는 훨씬 간단하고 효율적이지만 기능도 더 단일하며 회전판만 수동으로 전환할 수 없습니다.

　이를 달성하는 데 사용되는 것은 무엇입니까? 페이지 레이아웃 + 애니메이션 애니메이션

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-지수가 수정되므로 표시된 하위 항목에 영향을 주지 않음) 남은 시간은 다음 슬라이딩을 기다리고 왼쪽에 표시됩니다. 두 번째 하위 항목의 애니메이션 효과는 특히 시간 측면에서 첫 번째 하위 항목과 일치해야 전체적인 효과가 좋아집니다. 다음과 같습니다:

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

두 번째 하위 항목은 컨테이너 왼쪽 외부에서 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!