タイムライン効果を実現するCSS3

最近、コンピューターの電源を入れたところ、Geek Academy が新規ユーザーに 1 か月の無料期間を提供しているのを見つけたので、調べてみました。コースの詳細については説明しませんが、実践パスマップページで次の効果を確認しました。

タイムラインのような感じで、各ブロックにマウスを合わせると、スクリーンショット情報が展開されるドロップダウン効果があります。効果はかなりいい感じです。しかし、このエフェクトは、高さは幅のように柔軟に調整することができず、1つずつ設定する必要があるため、動的な追加にはあまり柔軟ではないように感じます。それらの多くは表示効果のために作られています。

もちろん、このアイデアに基づいて、全体的なレイアウト効果を中心に、よりシンプルな類似効果もいくつか作成しました。それぞれの特定のコンテンツを模倣することはありません。さらに面白くするために、オープニングアニメーションも追加しました...

まずは効果を見てみましょう:

以上です。これ以上は何も言わずに、本題に入りましょう。

HTML構造:

<div class="タイムゾーン">
            <div class="time">
                <h2>2015-07-02</h2>
                <div>
                    <p>レイジイベントシーズン1</p>
                    <ul>

                    </ul>
                </div>
            </div>
            <div class="timeLeft" style="top: 100px;">
                <h2>2015-07-02</h2>
                <div>
                    <p>レイジイベントシーズン2</p>
                    <ul>

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

ここでは HTML 構造を簡略化しました。.time クラスは右側を表し、.timeLeft は左側を表します。次に、余白をいくつか追加します。各ブロックのコンテンツは削除しました。

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

体{
                背景: #333;
            }
            h1{
                テキスト配置: 中央;
                色:#fff;
            }
            .タイムゾーン{
                幅:6px;
                高さ: 350ピクセル;
                背景: 水色;
                マージン: 0 自動;
                上マージン:50px;
                境界線の半径: 3px;
                位置: 相対的;
                -webkit-animation: heightSlide 2s linear;
            }
            @-webkit-keyframes 高さスライド{
                0%{
                    高さ: 0;
                }
                100%{
                    高さ: 350ピクセル;
                }
            }
            .timezone:after{
                内容: '続く...';
                幅: 100ピクセル;
                色:#fff;
                位置: 絶対;
                左マージン: -35px;
                下: -30px;
                -webkit-animation: showIn 4s イージー;
            }
            .timezone .time,.timezone .timeLeft{
                位置: 絶対;
                左マージン: -10px;
                上マージン:-10px;
                幅:20px;
                高さ:20px;
                境界線の半径: 50%;
                境界線:4px実線rgba(255,255,255,0.5);
                背景: 水色;
                -webkit-transition: すべて 0.5 秒;
                -webkit-animation: 表示をイージーにします。
            }
            .timezone .time:n番目の子(1){
                -webkit アニメーション期間:1 秒;
            }
            .timezone .timeLeft:n番目の子(2){
                -webkit アニメーション期間:1.5 秒;
            }
            .timezone .time:n番目の子(3){
                -webkit アニメーション期間:2s;
            }
            .timezone .timeLeft:n番目の子(4){
                -webkit アニメーション期間:2.5 秒;
            }
            @-webkit-keyframes showIn{
                0%,70%{
                    不透明度: 0;
                }
                100%{
                    不透明度: 1;
                }
            }
            .timezone .time h2,.timezone .timeLeft h2{
                位置: 絶対;
                左マージン: -120px;
                上マージン: 3px;
                色:#eee;
                フォントサイズ: 14px;
                カーソル:ポインタ;
                -webkit-animation: showIn 3s イージー;
            }
            .timezone .timeLeft h2{
                左マージン: 60px;
                幅: 100ピクセル;
            }
            .timezone .time:hover,.timezone .timeLeft:hover{
                border:4px 実線ライトブルー;
                背景：レモンシフォン;
                ボックスの影: 0 0 2px 2px rgba(255,255,255,0.4);
            }
            .timezone .time div、.timezone .timeLeft div{
                位置: 絶対;
                上位:50%;
                上マージン: -25px;
                左:50px;
                幅: 300ピクセル;
                高さ: 50px;
                背景: 水色;
                境界線:3px 実線 #eee;
                境界線の半径: 10px;
                zインデックス: 2;
                オーバーフロー: 非表示;
                カーソル:ポインタ;
                -webkit-animation: showIn 3s イージー;
                -webkit-transition: すべて 0.5 秒;
            }
            .timezone .timeLeft div{
                左:-337px;
            }
            .timezone .time div:hover、.timezone .timeLeft div:hover{
                高さ: 170ピクセル;
            }
            .timezone .time div p、.timezone .timeLeft div p{
                色: #fff;
                フォントの太さ: 太字;
                テキスト配置: 中央;
            }
            .timezone .time:before,.timezone .timeLeft:before{
                コンテンツ： '';
                位置: 絶対;
                上:0px;
                左: 32px;
                幅: 0px;
                高さ: 0px;
                border:10px 透明実線;
                右ボーダー:10px 実線 #eee;
                zインデックス:-1;
                -webkit-animation: showIn 3s イージー;
            }
            .timezone .timeLeft:before{
                左:-33px;
                border:10px 透明実線;
                左境界線:10px 実線 #eee;
            }
            .timezone .time div ul、.timezone .timeLeft div ul{
                リストスタイル: なし;
                幅:300ピクセル;
                パディング:5px 0 0;
                上境界線:2px 実線 #eee;
                色:#fff;
                テキスト配置: 中央;
            }
            .timezone .time div li、.timezone .timeLeft div li{
                表示: インラインブロック;
                高さ: 25px;
                行の高さ: 25px;
            }

この CSS スタイルコードは参考用です。あまり実用的ではなく、整理もされていません。主な目的は、アニメーション効果と全体的なレイアウトを理解することです。幸運をお祈りしています！

オリジナルリンク: https://www.cnblogs.com/jr1993/p/4779678.html

以上がCSS3でタイムラインエフェクトを実装する方法の詳細です。CSS3タイムラインエフェクトの詳細については、123WORDPRESS.COMの他の関連記事に注目してください。

<<: パスワードログインなしのLinux構成スタンドアロンおよびフルディストリビューションの詳細なチュートリアル

>>: MySQL ソート機能の詳細