A detailed example of the effect of a CSS3 implemented by a pure-in-the-paper

This article mainly introduced the pure CSS3 realizes the carousel chart effect instance, the small compilation thought quite good, now shares to everybody, also gives everybody to make a reference. Let's take a look at it with a little knitting.

First look at the demo, click to view the demo

One, casually say a few words

CSS3 animation effect of the powerful self-evident, since it has been hot, and JS animation has always been the pros and cons of the front-end debate on the topic, can not be doubted that the appearance of CSS3 animation to a certain extent, reduce the animation effect of the implementation of the difficulty, conducive to the front-end learning, Its streamlined code to get us out of the annoying JS debugging, of course, CSS animation effect has its limitations, we can not only use CSS3 simulation of all is the animation, the other is the browser compatibility issues. This time we use CSS3 to achieve a carousel chart effect, experience the power of CSS3. First of all, we can only realize the automatic rotation, the effect is the most common fade, did not realize the click Rotation effect, at least in my current level, automatic rotation and click rotation of the two pure CSS3 can only choose one, if you can achieve both effects of the method, please let me know.

Second, the layout

<section class= "Slider-contaner" >    <ul class= "Slider" >        <li class= "Slider-item slider-item1" ></li>        <li class= "Slider-item slider-item2" ></li>        <li class= "Slider-item Slider-item3 "></li>        <li class=" Slider-item slider-item4 "></li>        <li class=" Slider-item slider-item5 "></li>    </ul></section>

HTML code There is nothing to say, the style of the first must slider the big box must be relative positioning, in addition we use the LI tag to add background-image, because it is possible to use pure CSS to implement the response, in addition to the background map in response to see the whole picture, Must use background-size:100%, the other is the height of the problem, it is obvious that Slider-container must be the height of the same as Li, because the response must not be fixed to the height of death, so using the height attribute obviously not, The Padding property solves this problem, one is that background-image can be displayed in padding, and the second is that the padding in% is based on the parent element width.

*{      margin:0;      padding:0;} ul,li{      List-style:none;}. Floatfix {      *zoom:1;}. Floatfix:after {      content: "";      display:table;      Clear:both;}. slider-contaner{      width:100%;      Position:relative;}. slider,.slider-item{      padding-bottom:40%;}. slider-item{      width:100%;      Position:absolute;      background-size:100%;}. slider-item1{      Background-image:url (imgs/1.jpg);}. slider-item2{      Background-image:url (imgs/2.jpg);}. slider-item3{      Background-image:url (imgs/3.jpg);}. slider-item4{      Background-image:url (imgs/4.jpg);}. slider-item5{      Background-image:url (imgs/5.jpg);}

Third, design animation

Fade effect is sure to use opacity, first of all, the whole picture fade is the same animation, just the time is not the same, this is certainly the use of animation-delay to control, Animation Infinite rotation is definitely using animation-iteration-count:infinite, we this time 5 pictures, the entire animation is divided into pictures to stay and fade out two effects, with a representation, arrows represent the fade process.

Since none of the properties in CSS3 is a time interval that specifies two animations to play, we have to write the effect of the image into the animation when the other picture fades, obviously this is opacity:0; we use linear functions for animation, That is animation-timing-function:linear; the whole process uses 20s, a stay with 3 seconds, a fade using 1s, converted into percentages of 15% and 5%;

@keyframes fade{0%{      opacity:0;      Z-index:2;} 5%{      opacity:1;      Z-index:1;} 20%{      opacity:1;      Z-index:1;} 25%{      opacity:0;      z-index:0;} 100%{      opacity:0;      z-index:0;}}

Next is to add animation-delay for each picture, because the first picture must be displayed in the front, so the other through the adjacent sibling selector using opacity:0, the first picture does not need to fade, jump directly to stay is 5%, So Animation-delay for -1s, chapter two pictures and the first one is 20%, which is 4s,animation-delay 3s, and so on

. Slider-item +. slider-item{      opacity:0;}. slider-item1{      animation-delay: -1s;}. slider-item2{      animation-delay:3s;}. slider-item3{      animation-delay:7s;}. slider-item4{      animation-delay:11s;}. slider-item5{      animation-delay:15s;}

This time, our carousel can move.

Iv. Adding a carousel focus

Add carousel focus of course not to click, but to tell the visitor here there are a few pictures and the location of the current picture, at least for my own part, the carousel focus is very important, because if I do not know the number of pictures of the carousel, I can not click, I will be very uneasy, I feel I did not see the whole page. So let's add a bit of carousel focus. First very clear this can still use the above animation, and the layout must use Position:absolute, in addition to the obvious focus we have to write two times, once is the current picture style, a non-current picture style

<p class= "Focus-container" ><ul class= "Floatfix" > <li><p class= "Focus-item focus-item1" >< /p></li><li><p class= "Focus-item focus-item2" ></p></li><li><p class= " Focus-item focus-item3 "></p></li><li><p class=" Focus-item focus-item4 "></p></ Li><li><p class= "Focus-item focus-item5" ></p></li></ul></p>

. focus-container{      Position:absolute;      bottom:2%;      Z-index:7;      margin:0 Auto;      left:0;      right:0;}. Focus-container ul{      margin-left:46%;}. Focus-container li{      width:10px;      height:10px;      border-radius:50%;      Float:left;      margin-right:10px;      Background: #fff;}. focus-item{      width:100%;      height:100%;      Background: #51B1D9;      Border-radius:inherit;      animation-duration:20s;      Animation-timing-function:linear;      Animation-name:fade;      Animation-iteration-count:infinite;}. focus-item1{      animation-delay: -1s;}. focus-item2{      animation-delay:3s;}. focus-item3{      animation-delay:7s;}. focus-item4{      animation-delay:11s;}. focus-item5{      animation-delay:15s;}

Five, comb the code

If you maintain someone else's code you will know, code grooming for the importance of post-maintenance, without a comb of CSS code, arbitrary write to where is where, for the post-maintenance is simply a disaster, CSS code grooming personally think must first add the necessary comments, CSS code partition, The other is to minimize the need to modify the post-modification of the place, this is mainly a code refactoring problem, this problem I have been writing code to take into account, so the main task is to add comments and tell the maintainer code the most frequently modified place, we follow the most frequently modified code to put the last principle.

Let's analyze our code if we give other people a place that might need to be modified, the first must be the picture path, so we put this style at the end, then the height of the picture, the color of the carousel focus, the setting of the animation time (which also involves the number of pictures), the location of the carousel focus, and of course the rotation focus size After refactoring the code is as follows:

<section class= "Slider-contaner" ><ul class= "Slider" ><li class = "Slider-item slider-item1" ></li><li class= "Slider-item slider-item2" ></li><li class= " Slider-item slider-item3 "></li><li class=" Slider-item slider-item4 "></li><li class=" Slider-item slider-item5 "></li></ul><p class=" Focus-container "><ul class=" Floatfix "> <li><p class= "Focus-item focus-item1" ></p></li><li><p class= "Focus-item Focus-item2 "></p></li><li><p class=" Focus-item focus-item3 "></p></li>< Li><p class= "Focus-item focus-item4" ></p></li><li><p class= "Focus-item focus-item5" ></p></li></ul></p></section> 

/*css reset start*/*{margin:0;padding:0;} Ul,li{list-style:none;} /*CSS Reset End*//*css public Start*/.floatfix {*zoom:1;}. Floatfix:after {content: "";d Isplay:table;clear:both;} /*css public End*//*slider start*/.slider-contaner{width:100%;p osition:relative;}. Slider-item +. slider-item{opacity:0;}. slider-item{width:100%;p Osition:absolute;animation-timing-function:linear;animation-name:fade; animation-iteration-count:infinite;background-size:100%;}. Focus-container{position:absolute;z-index:7;margin:0 auto;left:0;right:0;}. Focus-container li{width:10px;height:10px;border-radius:50%;float:left;margin-right:10px;background: #fff;}. Focus-item{width:100%;height:100%;border-radius:inherit;animation-timing-function:linear;animation-name:fade; Animation-iteration-count:infinite;}. focus-item2,.focus-item3,.focus-item4,.focus-item5{opacity:0;}. Focus-container ul{margin-left:46%;} /* Set the position of the carousel Focus */.focus-container{bottom:2%;} /* Set the color of the current picture focus */.focus-item{background: #51B1D9;} /* Set the animation, modify the number of seconds according to your actual needs */.slider-item,.focus-item{animation-duration:20s;}. Slider-item1,.focus-item1{animation-delay: -1s;}. slider-item2,.focus-item2{animation-delay:3s;}. slider-item3,.focus-item3{animation-delay:7s;}. slider-item4,.focus-item4{animation-delay:11s;}. slider-item5,.focus-item5{animation-delay:15s;} @keyframes Fade{0%{opacity:0;z-index:2;} 5%{opacity:1;z-index:1;} 20%{opacity:1;z-index:1;} 25%{opacity:0;z-index:0;} 100%{opacity:0;z-index:0;}} /* Set background, response use media query to modify path */.slider-item1{background-image:url (imgs/1.jpg) according to Breakpoint;}. Slider-item2{background-image:url (imgs/2.jpg);}. Slider-item3{background-image:url (imgs/3.jpg);}. Slider-item4{background-image:url (imgs/4.jpg);}. Slider-item5{background-image:url (imgs/5.jpg);} /* Set the height of the picture, please modify the percentage according to the specific needs, the response to timely modify this value */.slider,.slider-item{padding-bottom:40%;}

Six, the last to pull two sentences

This CSS3 implementation of the Carousel diagram, the shortcomings are self-evident, click Rotation and automatic rotation can only choose one, but automatic rotation may be used on the mobile phone, this is a good choice, in addition, the current site is mostly banner design, Web page text is very small, especially the home page is more so, Sometimes than the advantages and disadvantages of the site design, but who choose the picture good-looking, who may be favored, this situation we can actually consider the rotation of the carousel diagram into the background, this time the rotation focus can not be used, I believe your blog home page or product home use background rotation, the effect will be very good.

"Recommended"

1. Free CSS Online video tutorial

2. CSS Online Manual

3. php.cn Lonely Nine-base (2)-css video tutorial