One, foreword

CSS 3 powerful self-evident to animation effects, since it has been hot, it also influences the js animation quality has become the issue of front field, not in doubt is the emergence of the range of animation to a certain extent, decrease the difficulty of the realization of animation effects for benefit for the study of the front end, the smaller amount of code, which brings us from the annoying js debug, Of course, CSS animation effect has its limitations, we can not use ONLY CSS3 simulation of all is animation, the other is browser compatibility issues. We use CSS3 to achieve a round broadcast graph effect, experience cSS3 powerful.

First of all, we can only achieve automatic rotation, the effect is the most common fade in and out, did not achieve the click rotation effect, at least in my current level, automatic rotation and click rotation two pure CSS3 can only choose one, if you can achieve two effects at the same time, please tell me.

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>

Copy the code

In addition, we added background-image in the LI tag, because it is possible to use pure CSS to achieve the responsiveness. In addition, in order to see the full view of the background image in the responsiveness, Background-size :100%. The height of slider-container must be the same as that of Li, because the height cannot be fixed in the response. The height attribute cannot be used, and the padding attribute can solve this problem. Background-image can be displayed within the padding, and background-image can be displayed within the padding in % based on the width of the parent element.

*{
      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);
}

Copy the code

Three, design animation

Animation-delay is used to control animation-revival-count: Animation-revival-count: Animation-revival-count: Animation-revival-count: animation-revival-count: animation-revival-count: animation-revival-count: animation-revival-count: animation-revival-count: animation-revival-count: animation-revival-count: animation-revival-count: animation-revival-count Infinite, we have 5 pictures this time, and the whole animation is divided into two effects, picture stop and fade out, as shown in the following figure. The arrow represents the fade in and fade out process.

Since there is no property in CSS3 that specifies the time interval between animation playback, we must add the effect of the same picture when other pictures fade in and out into the animation. Obviously, this time is 0;

For the convenience of writing animations, we use linear functions, namely animation-timing function:linear; The whole process uses 20s, a stay using 3 seconds, a fade in and out using 1s, equivalent to a percentage is 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; }}Copy the code

Animation-delay is added for each picture. Since the first picture must be displayed at the top, other pictures are used using opacity:0 through the adjacent sibling selector. The first picture does not need to fade in and out at the beginning, but jumps to stay at 5%, so animation-delay is -1s. In the second chapter, the distance between the picture and the first one is 20%, that is 4s, and the animation-delay is 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;
}

Copy the code

At this point our rotation chart can move

Fourth, add the focus of round seeding

Add them by the focus, of course, not to click, but tell the visitor here are a few pictures and the position of the picture at present, at least for me personally, shuffling focus is important, because if I don’t know them by several images, I have no way to click, and I will be very uncomfortable, feel didn’t see the whole page as a whole. So let’s add the focus of rotation. First of all, it is very clear that this animation can still be used, and the layout must use position: absolute. Also, it is obvious that the focus must be written twice, once for the current image style and once for the non-current image style

<div class="focus-container">
<ul class="floatfix"> 
<li><div class="focus-item focus-item1"></div></li>
<li><div class="focus-item focus-item2"></div></li>
<li><div class="focus-item focus-item3"></div></li>
<li><div class="focus-item focus-item4"></div></li>
<li><div class="focus-item focus-item5"></div></li>
</ul>
</div>

Copy the code
.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;
}

Copy the code

Five, comb the code

If you maintain other people’s code and you’ll know, comb code for the importance of maintenance, without combing the CSS code, follow one’s inclinations to where is, is a disaster for later maintenance, combing personally think that you must add the necessary CSS code comments, CSS code partition, This is mainly a problem of code reconstruction, which I have taken into account when writing the code, so the main task is to add comments and tell the maintainer where the code is most frequently modified. We follow the principle of putting the most frequently modified code to the last. If we analyze our code for others may need to modify place, first of all must be image path, so we put this style in the end, then the picture height, by the color of the focus, animation time set (also involving the number of images) here, by the location of the focus, focus by size, of course, can also be modified. The refactored 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>
<div class="focus-container">
<ul class="floatfix"> 
<li><div class="focus-item focus-item1"></div></li>
<li><div class="focus-item focus-item2"></div></li>
<li><div class="focus-item focus-item3"></div></li>
<li><div class="focus-item focus-item4"></div></li>
<li><div class="focus-item focus-item5"></div></li>
</ul>
</div>
</section>

Copy the code
/*css reset start*/ *{ margin:0; padding:0; } ul,li{ list-style: none; } /*css reset end*/ /*css public start*/ .floatfix { *zoom: 1; } .floatfix:after { content: ""; display: table; clear: both; } /*css public end*/ /*slider start*/ .slider-contaner{ width:100%; position:relative; } .slider-item + .slider-item{ opacity:0; } .slider-item{ width:100%; position: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 focus of the container */. Focus -container{bottom:2%; } /* Set the current image focus color */. Focus -item{background:#51B1D9; } /* Set the animation, please change the number of seconds as required */. 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; */. Slider-item1 {background-image:url(imgs/1.jpg); / / 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); } /* Set the height of the image, please modify the percentage according to your specific needs, responsive to change the value */. Slider,. Slider-item {padding-bottom:40%; }Copy the code

Six, last word

The CSS 3 implementation of round figure, faults is self-evident, click on the rotation and automatic rotation both can only choose one, but the automatic rotation can be used in the mobile terminal, it is a good choice, in addition, now the site is mostly banner design, web page text rarely, especially the homepage, sometimes than not website design, On the contrary, who chooses a good picture, who is likely to be favored, in this case we can actually consider the rotation of the image into the background, at this time the rotation focus can not be used, I believe that your blog home page or product home page using background rotation, the effect will be very good