CSS3 Implementing the Timeline effect

Recently opened the computer can see the Geek College what new users VIP free one months, go inside to see, here does not say its course how drops, inside the actual combat Path Diagram page saw this effect:

A bit like the bright of the time axis, and each mouse hover up also has the pull-down effect to expand the introduction information, feel the effect is also good. But it feels like this effect is not very flexible for dynamic addition, because height is not as flexible as the width of the adaptive, so add yourself a set. So many are made to show the effect.

Of course, I also based on its idea of a little bit of a simple similar effect, mainly or the overall layout effect, the specific piece of content will not be imitated, and I also added a bit of the opening animation, let it more fun some ...

Let's take a look at the effect:

Probably the effect is like this, down nonsense not to say, or directly into the topic:

HTML structure:

<Divclass= "TimeZone">            <Divclass= "Time">                <H2>2015-07-02</H2>                <Div>                    <P>The first season of the big event.</P>                    <ul>                    </ul>                </Div>            </Div>            <Divclass= "TimeLeft"style= "top:100px;">                <H2>2015-07-02</H2>                <Div>                    <P>The second season of the big event.</P>                    <ul>                    </ul>                </Div></Div>

This simplifies the HTML structure, the. Time class is represented on the right, and the. Timeleft means on the left, then add the margin on it, and the contents of each piece are erased.

The CSS style code is as follows:

Body{background:#333; }H1{text-align:Center;Color:#fff; }. TimeZone{width:6px;Height:350px;background:LightBlue;margin:0 Auto;Margin-top:50px;Border-radius:3px;position:relative;-webkit-animation:heightslide 2s linear; }@-webkit-keyframes heightslide{0%{Height:0; }100%{Height:350px; }}. Timezone:after{content:' not to be continued ... ';width:100px;Color:#fff;position:Absolute;Margin-left:-35px;Bottom:-30px;-webkit-animation:showin 4s ease; }. TimeZone. Time,.timezone. TimeLeft{position:Absolute;Margin-left:-10px;Margin-top:-10px;width:20px;Height:20px;Border-radius:50%;Border:4px Solid Rgba (255,255,255,0.5);background:LightBlue;-webkit-transition:All 0.5s;-webkit-animation:Showin Ease; }. TimeZone. Time:nth-child (1){-webkit-animation-duration:1s; }. TimeZone. Timeleft:nth-child (2){-webkit-animation-duration:1.5s; }. TimeZone. Time:nth-child (3){-webkit-animation-duration:2s; }. TimeZone. Timeleft:nth-child (4){-webkit-animation-duration:2.5s; }@-webkit-keyframes Showin{0%,70%{Opacity:0; }100%{Opacity:1; }}. TimeZone. Time H2,.timezone. TimeLeft H2{position:Absolute;Margin-left:-120px;Margin-top:3px;Color:#eee;font-size:14px;cursor:Pointer;-webkit-animation:showin 3s ease; }. TimeZone. TimeLeft H2{Margin-left:60px;width:100px; }. TimeZone. Time:hover,.timezone. Timeleft:hover{Border:4px Solid LightBlue;background:LemonChiffon;Box-shadow:0 0 2px 2px rgba (255,255,255,0.4); }. TimeZone. Time Div,.timezone. TimeLeft Div{position:Absolute;Top:50%;Margin-top:-25px; Left:50px;width:300px;Height:50px;background:LightBlue;Border:3px Solid #eee;Border-radius:10px;Z-index:2;Overflow:Hidden;cursor:Pointer;-webkit-animation:showin 3s ease;-webkit-transition:All 0.5s; }. TimeZone. TimeLeft Div{ Left:-337px; }. TimeZone. Time Div:hover,.timezone. TimeLeft div:hover{Height:170px; }. TimeZone. Time Div p,.timezone. timeLeft Div P{Color:#fff;Font-weight:Bold;text-align:Center; }. TimeZone. Time:before,.timezone. Timeleft:before{content:"';position:Absolute;Top:0px; Left:32px;width:0px;Height:0px;Border:10px Solid Transparent;Border-right:10px Solid #eee;Z-index:-1;-webkit-animation:showin 3s ease; }. TimeZone. Timeleft:before{ Left:-33px;Border:10px Solid Transparent;Border-left:10px Solid #eee; }. TimeZone. Time Div ul,.timezone. TimeLeft Div ul{List-style:None;width:300px;padding:5px 0 0;Border-top:2px solid #eee;Color:#fff;text-align:Center; }. TimeZone. Time Div li,.timezone. timeLeft Div Li{Display:Inline-block;Height:25px;Line-height:25px; }

This CSS style code is only for reference, the practicality is not very strong, but also not how to organize, mainly to understand the animation effect and the overall layout of it. Good

CSS3 Implementing the Timeline effect