CSS step-by-step pure CSS Slide

CSS step-by-step pure CSS Slide

yesterday wrote the blog post someone ordered praise, let me excited, dinner reward myself a chicken leg, 650) this.width=650; "src=" Http://img.baidu.com/hi/jx2/j_0028.gif "alt=" j_0028. GIF "/>. If my blog is helpful to you, please give me a praise, your encouragement is my driving force 650) this.width=650; "src=" Http://img.baidu.com/hi/babycat/C_0019.gif "alt=" c_ 0019.gif "/>. If you find that there are errors in the text, also please Daniel pointed out 650) this.width=650; "src=" Http://img.baidu.com/hi/face/i_f28.gif "alt=" i_f28.gif "/ >. The following start text.

First use HTML to build the basic framework, as follows:

<div id= "Container" >    <div class= "Slide" >     <!--will need to show the picture put in a UL inside-->        <ul>             <li class= "First animation" >                                  <div class= "ToolTips" ><p> Heaven and Hell </p></div>             </li>             <li class= "Second animation" >                       &nBsp;          <div class= "ToolTips" ><p> Snow Mountain </p></div>            </li>             <li class= "third  Animation ">                                  <div class= "ToolTips" ><p> Valley </p></div>             </li>             <li class= "Fourth animation" >                                 <div class= "ToolTips" > <p> Flower </p></div>            </ Li>            <li class= "fifth  Animation ">                                  <div class= "ToolTips" ><p> Lantian Baiyun </p></div>             </li>         </ul>        <!--This is a progress bar-->         <div class= "ProgressBar" ></div>     </div></diV> 

Then use CSS to add a basic style to it and make it look less messy.

*{    margin: 0;    padding: 0;} body{    min-width: 900px;} #container {    width: 830px;    margin: 50px auto;}. slide{    border: 15px solid  #ccc;     border-radius:  5px;    width: 800px;    height: 450px;     overflow: hidden;    position: relative;}. Slide ul{    position: relative;}. slide ul li{    list-style: none;    position:  absolute;    left: -800px;}. slide ul li img{    width: 800px;    height:  450px;}. Tooltips{    background: rgba (0,0,0,0);    width: 300px;   &Nbsp; height: 60px;    position: relative;    top:  -80px;    left: -300px;    /*-webkit-transition: all  0.3s ease-in-out;*/    /*-moz-transition: all 0.3s ease-in-out;* /    /*-ms-transition: all 0.3s ease-in-out;*/    /*- O-transition: all 0.3s ease-in-out;*/    /*transition: all 0.3s  ease-in-out;*/}.tooltips p{    color: #fff;     font-size :24px;    font-weight:300;    line-height:60px;     padding:0 0 0 20px;}. Slide .animation:hover .tooltips{    left:0;    background:  rgba (0,0,0,0.7);}. Progressbar{    position: absolute;    width: 800px;    bottom: 0px;    height: 5px;     background:  #000;    z-index: 1;     /*animation: progress 25s linear infinite;*/    /*-moz-animation:  progress 25s linear infinite;*/    /*-webkit-animation: progress  25s linear infinite;*/}

After adding the style, it feels a lot fresher. Next is the most critical part, using CSS animations to move the picture to the effect of the carousel. (It is the effect of this article, the image is a little unclear, the main function is five pictures in turn, the mouse across the Stop animation and appear prompt text and the progress bar below)

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M02/85/8B/wKiom1eoJ_KziFTmABEaFkZ8nQg676.gif "title=" Video 2.gif "alt=" Wkiom1eoj_kziftmabeafkz8nqg676.gif "/>

After collecting a bunch of seniors ' code, I learned the basics of carousel.

During a playback period (25s is used in the text), five carousel images appear in the window in turn, by changing the opacity and z-index of the picture. To animate a picture from the left to the right, we just need to change the picture's Ieft property.

I'll use a timetable to describe the principle of implementation.

650) this.width=650; "Src=" Http://s3.51cto.com/wyfs02/M00/85/8B/wKiom1eoJGfAxOJtAAKf0Be4wqU098.jpg-wh_500x0-wm_3 -wmp_4-s_1407561244.jpg "title=" 01.jpg "alt=" Wkiom1eojgfaxojtaakf0be4wqu098.jpg-wh_50 "/>

Take the first picture for example, its CSS animation is as follows:

/* Define animation */.slide li.first{    animation: cycle01 25s linear  infinite;    -moz-animation: cycle01 25s linear infinite;     -webkit-animation: cycle01 25s linear infinite;} /* Define keyframes as on the table */@keyframes  cycle01 {    0%{left: 0;opacity: 1;z-index:  0;}     10%{left:0;opacity: 1;z-index: 0;}     20%{left: 800px;opacity: 0;z-index: 0;}     21%{        left: -800px;         opacity:0;        z-index: -1 ;     }    90%{        left:  -800px;        opacity: 0;         z-index: -1;    }    100%{         left:0px;        opacity: 1;         z-index: 0;    }}

And then, in turn, define the four following. Here, the basic functionality of the CSS slide has been implemented. The next step is to add the mouse pause, animation stop and the following progress bar function.

. slide:hover li,.slide:hover .progressbar{      /* Stop the animation when the mouse is over */     animation-play-state: paused;} /* The progress bar appears in the same principle as the image above */.progressbar{    position: absolute;     width: 800px;    bottom: 0px;    height: 5px;     background:  #000;    z-index: 1;     animation: progress 25s linear infinite;    -moz-animation:  progress 25s linear infinite;    -webkit-animation: progress 25s  linear infinite;} @keyframes  progress {                 /* defining KeyFrames */    0%,20%,40%,60%,80%{         width:0;        opacity: 0;    }    5%,25%,45%,65%,85%{         width: 50%;        opacity:  0.7;    }    10%,30%,50%,70%,90%{         width: 100%;        opacity: 0.3;     }    11%,31%,51%,71%,91%{        width :  0;        opacity: 0;    }}

The full source code and pictures are in the attachment below. The compatibility issue is not handled, so please use the latest version of the browser.

This article is from the "Fcheng" blog, make sure to keep this source http://fcheng.blog.51cto.com/10644114/1835631

CSS step-by-step pure CSS Slide