순수 CSS3를 사용하여 회전식 차트를 구현하는 방법-CSS 튜토리얼-php.cn

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

一个新手

풀어 주다： 2017-10-16 10:48:27

원래의

1857명이 탐색했습니다.

머리말

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(&#39;./../images/bg.png&#39;) 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

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

머리말

HTML 부분

레이아웃 부분

캐러셀 애니메이션 부분

진행률 표시줄 애니메이션

hover 애니메이션 일시정지