CSS3 to achieve timeline effects

Recently, when I turned on my computer, I saw that Geek Academy offered a free month for new users, so I went in to take a look. I won’t go into details about its courses, but I saw this effect on the practical path map page:

It feels a bit like a timeline, and when you hover the mouse over each block, there is a drop-down effect to expand the screenshot information. The effect feels pretty good. But I feel that this effect doesn't seem to be very flexible for dynamic addition, because the height cannot be flexibly adapted like the width, so you have to set them one by one. So many of them are made for display effects.

Of course, I also made some simpler similar effects based on this idea, mainly the overall layout effect, and I won’t imitate each specific content. I also added an opening animation to make it more interesting...

Let’s take a look at the effect first:

That's about it. Let's get straight to the point without further ado:

HTML structure:

<div class="timezone">
            <div class="time">
                <h2>2015-07-02</h2>
                <div>
                    <p>Rage Event Season 1</p>
                    <ul>

                    </ul>
                </div>
            </div>
            <div class="timeLeft" style="top: 100px;">
                <h2>2015-07-02</h2>
                <div>
                    <p>Rage Event Season 2</p>
                    <ul>

                    </ul>
                </div>
</div>

I have simplified the HTML structure here. The .time class represents the right side, and .timeLeft represents the left side. Then I just add some margins. I have deleted the content in each block.

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: '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 for reference only. It is not very practical and has not been organized much. The main purpose is to understand the animation effects and the overall layout. Best wishes!

Original link: https://www.cnblogs.com/jr1993/p/4779678.html

The above is the details of how to implement timeline effects with CSS3. For more information about CSS3 timeline effects, please pay attention to other related articles on 123WORDPRESS.COM!

<<: Linux configuration without password login stand-alone and full distribution detailed tutorial

>>: MySQL sorting feature details