CSS3 implementation of the timeline effect method

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:

<p class= "TimeZone" >              <p class= "Time" >                  

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 finished ... ';                   width:100px;                   Color: #fff;                   Position:absolute;                   Margin-left: -35px;                   Bottombottom: -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 P,.timezone. TimeLeft p{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 p{left:-337px;               }. TimeZone. Time P:hover,.timezone. TimeLeft p:hover{height:170px;                   }. TimeZone time P p,.timezone. TimeLeft p 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 P ul,.timezone. timeLeft p ul{list-style:none;                   width:300px;                   padding:5px 0 0;                   border-top:2px solid #eee;                   Color: #fff;               Text-align:center;                   }. TimeZone time P li,.timezone. timeLeft p 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

The above is the whole content of this article, I hope that everyone's learning has helped, but also hope that we support topic.alibabacloud.com.