Preface

Compared with the carousel effect controlled by JavaScript, the carousel effect achieved by pure CSS3 is much simpler and more efficient, but the function is also more single. Only the carousel cannot be switched manually.

What is used to achieve it? Page layout + animation animation

HTML part

纯CSS3轮播图

Copy after login

The html part is still the same thing, container + multiple carousel image sub-items

Layout part

/*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; }

Copy after login

1. Container overflow hiding

2. Carousel child absolute positioning

Carousel animation part

This part is the focus of this article.

To implement a carousel using pure CSS3, you must use animation animation in an infinite loop, and you need to control the animation effect of each sub-item individually, and the overall effect is a perfect carousel effect.

The child items use absolute positioning, and the carousel effect to be achieved is from left to right, so the value of left can be controlled to achieve display and hiding (positioning outside the container means hiding) and sliding effects. First implement the first sub-item

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

Copy after login

The design carousel cycle is 25s, so each sub-item has 5s of display and movement time. Animation effect of child one: 0-4s display, 4-5s sliding to the right to hide outside the container, and then quickly sliding to the left side of the container to hide (z-index is modified at this time, so it will not affect the displayed child item), the remaining time is to wait for the next sliding and display on the left. The animation effect of the second sub-item needs to match the first sub-item, especially in terms of time, so that the overall effect will be good. As follows:

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

Copy after login

The second sub-item waits outside the left side of the container for 1-4s, and slides out to the right for 4-5s (at this time the first sub-item slides to the left out of hiding), 5-9s to display, 9-10s to slide out of hiding.

Similarly to the remaining sub-items, adjust the animation in sequence, and the overall effect will be very smooth.

Progress bar animation

Because the display time is longer than 4s, you can add a progress bar and the interactive experience will be better. p.progress in HTML is the structure of the progress bar. The style is as follows:

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

Copy after login

Use the width to control the progress.

hover Pause animation

If you need to pause the animation when the mouse is hovering, use animation-play-state: paused control

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

Copy after login

The above is the detailed content of How to implement carousel chart using pure CSS3. For more information, please follow other related articles on the PHP Chinese website!