A method of realizing the carousel diagram with pure CSS3

Objective

The CSS3 implementation of the Carousel graph effect, compared with JavaScript control, is much simpler and more efficient, but the function is also more single, only the carousel can not be manually switched.

What is the realization of it? Page layouts + animation animations

HTML section

<p class= "Container" > <p class= "Title-container" > 
The HTML part is also those things, container + multiple Carousel map sub-items

Layout section



/*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, container overflow hidden

2. Absolute positioning of carousel sub-items

Carousel Animation Section

This part is the focus of this article.

Using pure CSS3 for carousel, it is absolutely necessary to use animation animations infinitely, and to control the animation of each child individually, and the overall effect is the perfect carousel effect.

The subkey uses absolute positioning and the desired carousel effect is left-to-right, so you can control the value to show and hide (hidden outside the container) and slide effect. Implement first Subkey first



. 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;}  }
The design of the carousel cycle is 25s, so each subkey has 5s display and move time. Child one animation effect: 0-4s display, 4-5s slide to the right to hide outside the container, and then quickly slide down the left side of the container hidden (modified Z-index, so does not affect the child being displayed), the remaining time is left to wait for the next slide and display. The animation effect of the second child needs to fit with the first child, especially in time, so that the overall effect is 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;}  }
The second subkey 1-4s waits outside the left side of the container, 4-5s to the right to slide out of the display (when the first subkey slides left to hide), 5-9s show 9-10s to the left to slide out of the hide.

In the same vein, the rest of the children, in turn adjust the animation, the overall effect will be very smooth.

Progress bar Animation

Because the display time is longer than 4s, you can join the progress bar and the interactive experience will be even better. The p.progress in HTML is the structure of the progress bar. The styles are 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;  }}
The progress is identified by controlling the width.

Hover Pause Animation

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



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