Implémentation CSS3 des effets de chronologie

Quand j'ai allumé mon ordinateur récemment, j'ai vu que les nouveaux utilisateurs de Geek Academy bénéficiaient d'un VIP gratuit pendant un mois, alors je suis entré et j'ai jeté un œil. Je ne parlerai pas de ses cours ici, j'ai vu cet effet. la page de la carte du chemin de combat :

C'est un peu comme une chronologie, et chaque morceau de souris survolé a un effet déroulant pour agrandir et introduire la capture d'écran Informations, et l'effet est plutôt bon. Mais il semble que cet effet ne soit pas très flexible pour un ajout dynamique, car la hauteur n'est pas aussi flexible que la largeur, il faut donc l'ajouter un par un. Beaucoup d’entre eux sont conçus pour un effet d’affichage.

Bien sûr, j'ai également créé des effets similaires plus simples basés sur cette idée, principalement l'effet de mise en page complet, je n'imiterai pas chaque élément de contenu spécifique, et j'ai également ajouté moi-même une animation d'ouverture pour le rendre plus amusant. ...

Regardons d'abord l'effet :

L'effet est probablement comme ça. Sans plus tarder, passons directement au sujet. :

Structure HTML :

<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>

Voici une structure HTML simplifiée La classe .time est représentée à droite et .timeLeft est représentée à gauche. Ajoutez ensuite quelques marges. D'accord, je supprimerai le contenu de chaque bloc.

Le code de style CSS est le suivant :

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;   
            }

Ce code de style CSS est à titre indicatif seulement. Il n'est pas très pratique et n'a pas été organisé. est principalement pour la compréhension. Jetons un coup d'œil aux effets d'animation et à la disposition générale. Meilleurs vœux!

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun. J'espère également que tout le monde soutiendra le site Web PHP chinois.

Pour plus d'articles liés à l'implémentation CSS3 des effets de chronologie, veuillez faire attention au site Web PHP chinois !