タイムライン効果の CSS3 実装-CSSチュートリアル-php.cn

タイムライン効果の CSS3 実装

高洛峰

リリース： 2017-03-07 14:56:08

オリジナル

1647 人が閲覧しました

最近、コンピューターをオンにしたときに、Geek Academy の新規ユーザーは 1 か月間無料の VIP を利用できることがわかりました。そのため、コースについてはここでは触れませんが、実践的な効果が見られました。パスマップページ:

タイムライン効果の CSS3 実装

これはタイムラインに似ており、マウスホバーのすべての部分にドロップダウン効果があり、スクリーンショット情報を展開して紹介します。その効果は非常に優れています。ただし、このエフェクトは動的な追加にはあまり柔軟ではないようです。高さは幅ほど柔軟ではないため、1 つずつ追加する必要があります。それらの多くはディスプレイ効果のために作られています。

もちろん、私はこのアイデアに基づいて、主に全体のレイアウト効果をベースに、いくつかのより単純な同様の効果も作成しました。また、個々のコンテンツの特定の部分を模倣するわけではありません。また、より面白くするために、オープニングアニメーションも自分で追加しました。 ..

最初に効果を見てみましょう:

タイムライン効果の CSS3 実装

効果はおそらく次のとおりです。これ以上の苦労はせずに、直接トピックに進みましょう:

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>

ログイン後にコピー

これは簡略化されたものです。 HTML 構造。右側に time クラスが表示され、左側に .timeLeft が表示されます。その後、余白を追加して、各ブロックのコンテンツを削除します。

CSS スタイルコードは次のとおりです:

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: &#39;未完待续...&#39;;   
                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: &#39;&#39;;   
                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;   
            }

ログイン後にコピー

この CSS スタイルコードは、あまり実用的ではなく、体系化されていません。アニメーションの効果と全体的なレイアウトを理解することが重要です。幸運を！

以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。また、皆さんも PHP 中国語 Web サイトをサポートしていただければ幸いです。

タイムライン効果の CSS3 実装に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。