純cssフルスクリーン画像スライド作成

毎日Linuxを書くのは少し煩わしいので、味を変えます.今日cssを使ってフルスクリーンスライドを作ると言って、私は宝を洗う技師がw 3 cplusで書いた文章を見た:純CSS 3でフルスクリーン画像スライドを作る.作者はよく书いて、私がよくぶらぶらしているブログで、みんなに推荐して、作者が自明ではないと思っているかもしれませんが、多くの细かい问题の作者は说明していません.私はここでよく说明します.
関連ファイルはw 3 cplusで見つけることができます.
HTML構造は非常に簡単です.

    

        
images1
        
images2
        
images3
        
images4
        
images5
        
images6
    
    

        
    

まず表示領域全体を位置決めし、問題のある部分はコードに注釈を付け、overflow-yとoverflow-xここでの役割は、運動中に表示領域を超えるコンテンツがある場合の動作です.

*{
    margin: 0;
    padding: 0;
}

body{
    background: #000;
    font-size: 15px;
    font-weight: 400;
    font-family: Constantia,palatino,"Palatino Linotype","Palatino LT STD",Georgia;
    color: #aa3e03;
    overflow-y: scroll; /*               */
    overflow-x: hidden; /*               */
}

/*                       */
.cb-slideshow,
.cb-slideshow:after{
    /*            */
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
}

運動のアニメーションを定義し、css 3アニメーションを知っている人はみなこの意味を理解すると信じ、ブロックの透明度、先端に対する位置、動作関数をそれぞれ指定している.ここでは2つの問題を考慮する必要があります.1.モーションアニメーション設定の相対位置は、初期位置に対してですか、それとも前の位置に対してですか.これは、モーションパラメータを設定するときの値に影響します.2.なぜ2000 pxを設定すると、表示されるブロックが下の位置に存在しないのですか?後でこの問題について説明します.

/*         */
@keyframes imageAnimation {
    0%{
        opacity: 0;
        transform: translateY(2000px);
        animation-timing-function: ease-in;
    }
    8%{
        opacity: 1;
        transform: translateY(-30px); 
        animation-timing-function: ease-out;
    }
    17%{
        opacity: 1;
    }
    25%{
        opacity: 0;
        transform: translateY(10px); 
    }

    100%{
        opacity: 0;
        transform: translateY(0); 
    }
}

アニメーションの呼び出しを見てみましょう.作者が作った最も巧みなのはアニメーションの列の上で、もし私が一つ一つアニメーションを書くならば、しかし作者は1つのアニメーションを使います.著者らは、すべてのli要素に対して同じアニメーションを実行し、各部分の遅延によってアニメーションのキューに達し、順番に実行する.実行すると、afterで設定した背景画像が中間の少し半透明な画像なので、このような効果が生じるというぼんやりした感じがします.

.cb-slideshow:after{
    content: "";
    background: url("../img/pattern.png") repeat left top;
}

.cb-slideshow li {
    /*                    ，                     */
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    color: transparent;

    /*            */
    opacity: 0;
    z-index: 0;

    /*                */
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;

    background-position: center;
    background-repeat: no-repeat;

    -webkit-animation: imageAnimation 36s linear infinite 0s;
    -moz-animation: imageAnimation 36s linear infinite 0s;
    -o-animation: imageAnimation 36s linear infinite 0s;
    -ms-animation: imageAnimation 36s linear infinite 0s;
    animation: imageAnimation 36s linear infinite 0s;
}

/*           */
.cb-slideshow li:nth-child(1){
    background-image: url(../img/1.jpg);
}
.cb-slideshow li:nth-child(2){
    background-image: url(../img/2.jpg);
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s;
}
.cb-slideshow li:nth-child(3){
    background-image: url(../img/3.jpg);
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s;
}
.cb-slideshow li:nth-child(4){
    background-image: url(../img/4.jpg);
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s;
}
.cb-slideshow li:nth-child(5){
    background-image: url(../img/5.jpg);
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s;
}
.cb-slideshow li:nth-child(6){
    background-image: url(../img/6.jpg);
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s;
}


/*         */
@keyframes imageAnimation {
    0%{
        opacity: 0;
        transform: translateY(2000px);
        animation-timing-function: ease-in;
    }
    8%{
        opacity: 1;
        transform: translateY(-30px); 
        animation-timing-function: ease-out;
    }
    17%{
        opacity: 1;
    }
    25%{
        opacity: 0;
        transform: translateY(10px); 
    }

    100%{
        opacity: 0;
        transform: translateY(0); 
    }
}

コードが出てきました.今、上の2つの問題について話します.目で見ると、プログラミングというものは現象を見ると過程を知ることができます.だから私は枠を設定して、注釈にも指摘しました.白い枠線の動き軌跡を観察すると、比較的初期位置であることがわかります.第2の問題は、言い換えればなぜ縦スクロールバーが表示されなかったのか、原因はbodyの特性に関係し、bodyの高さは内部内容に関係しているが、最初と最後に内容が急に表示されずにoption:0になったので、隠すに相当し、表示されなくなった.
w 3 cplusの著者はすべての内容を完璧にしたので、最終的な効果を試してみることをお勧めします.