CSS3 implementation of timeline effects

Recently, when I turned on my computer, I could see that new users of Geek Academy have free VIP for one month, so I went in and took a look. I won’t talk about its courses here. I saw this effect on the actual combat path map page:

#It’s a bit like a timeline, and every piece of mouse hovering has a drop-down effect to expand and introduce the screenshot information, and the effect is pretty good. But it seems that this effect is not very flexible for dynamic addition, because the height is not as flexible as the width, so you have to add it one by one. So many of them are made for display effect.

Of course, I also created some simpler similar effects based on this idea, mainly the overall layout effect. I will not imitate each specific piece of content, and I also added an opening animation myself. Make it more fun...

Let’s take a look at the effect first:

The effect is probably like this. Without further ado, let’s go directly to the topic:

HTML structure:

<p class="timezone">  
            <p class="time">  
                <h2>2015-07-02</h2>  
                <p>  
                    <p>暴走大事件第一季</p>  
                    <ul>  
  
                    </ul>  
                </p>  
            </p>  
            <p class="timeLeft" style="top: 100px;">  
                <h2>2015-07-02</h2>  
                <p>  
                    <p>暴走大事件第二季</p>  
                    <ul>  
  
                    </ul>  
                </p>  
</p>

The HTML structure is simplified here. The .time class is represented on the right, .timeLeft is represented on the left, and then just add some margins. , I deleted the content in each piece.

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: '未完待续...';   
                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 for reference only. It is not very practical and has not been organized. The main thing is to understand the animation. The effect also depends on the overall layout. good luck!

The above is the entire content of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support the PHP Chinese website.

For more articles related to CSS3 implementation of timeline effects, please pay attention to the PHP Chinese website!