純css3實現頁面平滑過渡

demo地址

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE-edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Css3實現頁面平滑過渡</title>
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/index.css" />
</head>
<body>
    <div class="container">
        <div class="st-container">
            <!-- 導航條開始 -->
            <!-- 利用input的checked狀態來爲a標籤添加選中狀態 -->
            <!-- 佈局方式input+a標籤，不可以添加父級，不然css無法選擇到st-scroll -->
                        <input type="radio" name="radio-set" checked="checked" id="st-control-1">
                        <a class="nav-a" href="#st-panel-1">Serendipity</a>

                        <input type="radio" name="radio-set" id="st-control-2">
                        <a class="nav-a" href="#st-panel-2">Happiness</a>

                        <input type="radio" name="radio-set" id="st-control-3">
                        <a  class="nav-a" href="#st-panel-3">Tranquillity</a>

                        <input type="radio" name="radio-set" id="st-control-4">
                        <a class="nav-a" href="#st-panel-4">Positivity</a>

                        <input type="radio" name="radio-set" id="st-control-5">
                        <a class="nav-a" href="#st-panel-5">Friendship</a>
            <!-- 導航條結束 -->
            <!-- 頁面主體內容開始 -->
            <div class="st-scroll">
                <!-- 第一屏 -->
                <section class="st-panel" id="st-panel-1">
                    <!-- 頁面上方的三角形，data-icon是三角形中的圖標樣式！ -->
                    <div class="st-desc" data-icon="H"></div>
                    <h2>Serendipity</h2>
                    <p>走過春的田野，趟過夏的激流，來到秋天就是安靜祥和的世界。秋天，雖沒有玫瑰的芳香，卻有秋菊的淡雅，沒有繁花似錦，卻有碩果累累。秋天，沒有夏日的激情，卻有浪漫的溫情，沒有春的奔放，卻有收穫的喜悅。清風落葉舞秋韻，枝頭碩果醉秋容。秋天是甘美的酒，秋天是壯麗的詩，秋天是動人的歌。</p>
                </section>
                <!-- 第二屏 -->
                <section class="st-panel st-color" id="st-panel-2">
                    <div class="st-desc" data-icon="2"></div>
                    <h2>Happiness</h2>
                    <p>時光如流，歲月帶走了許多，卻始終帶不走那牽心的傷痕，寂靜中，依然聽得那一聲聲傷感的嘆息；歲月如水，時光抹去了許多，卻始終抹不去那傷心的印跡，孤獨中，依然感受了那一陣陣酸辛的撞擊。人生，總有一些人，一些事，一些情，始終也走不出記憶，深居心靈，讓你獨自品嚐時，享受着那份孤獨的美麗。</p>
                </section>
                <!-- 第三屏 -->
                <section class="st-panel" id="st-panel-3">
                    <div class="st-desc" data-icon="B"></div>
                    <h2>Tranquillity</h2>
                    <p>靜靜地站立枝頭，靜靜地綻放。不期待那讚許的目光，不奢望那雷鳴般的掌聲，不吝惜那優雅的花香；沒有蜂纏蝶繞，沒有綠葉簇擁，也不懼雨雪冰霜。在廢園一角或是深山峽谷，靜靜地開花，悄悄地凋落。它曾來過這個世界，它屬於這個世界，曾經擁有過這個世界，將曾有的倩影，曾有的花香留下，然後，悄悄離去。像一縷清風，像一顆流星…</p>
                </section>
                <!-- 第四屏 -->
                <section class="st-panel st-color" id="st-panel-4">
                    <div class="st-desc" data-icon="x"></div>
                    <h2>Positivity</h2>
                    <p>別想來日方長，世上最愚不可及的事，莫過於胸有大志，卻又虛擲時光。一生其實不長，有時還沒等你活透徹，青春難覓，垂暮已至，唯留一聲嗟嘆。歲月難饒，光陰不逮，我們現在過的每一天，都是我們餘生中最年輕的一天，把握不好當下，未來必是一片虛無。我們需要夢想，但要邁開腿，歷經跋涉方能抵達。</p>
                </section>
                <!-- 第五屏 -->
                <section class="st-panel" id="st-panel-5">
                    <div class="st-desc" data-icon="c"></div>
                    <h2>Friendship</h2>
                    <p>用友誼寫一本書，一本厚厚的書。在書裏，友誼如珍珠，我們共同穿綴，聯成一串串璀璨的項鍊；友誼如綵綢，我們共同剪裁，縫製成一件件絢麗的衣衫；友誼如油彩，我們共同調色，描繪出一幅幅美妙的圖畫。</p>
                </section>
            </div>
            <!-- 頁面主體內容結束 -->
        </div>
        </div>
    </div>
</body>
</html>


/*設置頁面上方三角形內的圖標，實際上是一種字體*/
@font-face{
    /*設置字體類型*/
    font-family: "raphaelicons";
    /*引入字體文本，共有4個後綴文件需要全部引入*/
    src:url('../fonts/raphaelicons-webfont.eot') format('eot'),
        url('../fonts/raphaelicons-webfont.ttf') format('ttf'),
        url('../fonts/raphaelicons-webfont.woff') format('woff'),
        url('../fonts/raphaelicons-webfont.svg') format('svg');
        /*寬度和樣式不設置*/
        font-weight: normal;
        font-style: normal;
}
body{
    font-family: Georgia,serif;
    background-color: #ddd;
    font-weight: 400;
    font-size: 15px;
    color: #333;
    /*字體抗鋸齒效果，可以使字體更加平滑*/
    -webkit-font-smoothing:antialiased;
}

a{
    color: #555;
    text-decoration: none;
}

.clr{
    width: 0;
    height: 0;
    overflow: hidden;
    clear: both;
    padding: 0;
    margin: 0;
}

/*設置根父級大小佔滿整個屏幕，定位後設置4個方向爲0，可以自動撐滿整個屏幕*/
.st-container{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    font-family: "Josefin Slab","myriad Pro",Arial,sans-serif;
}

/* > 子選擇器，只選擇子級，孫子級不會有影響,但是最好是給定元素一個類
，這樣靈活性會更好，層級嵌套不會那麼緊密，瀏覽器解析css是從右向左的，
所以類選擇器會比元素選擇器更好一點，input留作對比*/
.st-container > input,
.st-container > .nav-a{
    /*寬度設置100/5=20%*/
    width: 20%;
    height: 50px;
    line-height: 50px;
    /*固定到頁面底部*/
    position: fixed;
    bottom: 0;
    /*頁面所有層級最好不要超過2*/
    z-index: 1;
}

/*input設置爲透明，層級要比a高*/
.st-container > input{
    opacity: 0;
    z-index: 2;
    /*鼠標樣式變爲手形*/
    cursor:pointer;
}

/*設置a*/
.st-container > .nav-a{
    font-weight: 700;
    font-size: 20px;
    background-color: #e23a6e;
    text-align: center;
    color: #fff;
}

/* + 緊鄰兄弟選擇器，只會選擇緊鄰的兄弟級*/
#st-control-1,#st-control-1 + .nav-a{
    left: 0;
}
#st-control-2,#st-control-2 + .nav-a{
    left: 20%;
}
#st-control-3,#st-control-3 + .nav-a{
    left: 40%;
}
#st-control-4,#st-control-4 + .nav-a{
    left: 60%;
}
#st-control-5,#st-control-5 + .nav-a{
    left: 80%;
}


/*添加高亮效果，當input爲checked時 ，它的兄弟級a標籤背景色改變
    當input爲checked並且有hover時 a改變顏色，
*/
input:checked + .nav-a,
input:checked:hover + .nav-a{
    background-color: #821134;
}

/*繪製三角形，當input爲選中狀態時，在a的後面添加僞元素，並繪製爲三角
形，定位到導航上方*/
input:checked + .nav-a:after {
    content: "";
    /*繪製三角形方法，寬高爲0,border顏色爲透明，底部border顏色添加，
    定位*/
    width: 0;
    height: 0;
    overflow: hidden;
    border: 20px solid transparent;
    border-bottom-color: #821134;
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -20px;
}

/*當input hover效果時 他的兄弟級a標籤變色*/
input:hover + .nav-a {
    background-color: #ad244f;
}

/*內容區*/
/*父級 與每一屏寬高100%，並且相對定位*/
.st-scroll,
.st-panel{
    width: 100%;
    height: 100%;
    position: relative;
}

.st-panel{
    overflow: hidden;
    z-index: 0;
}

/*設定父級的位置0,0*/
.st-scroll{
    left: 0;
    top: 0;
    /*設定過渡效果，transform 0.6秒完成 ，又快到慢*/
    transition:transform 0.6s ease-in-out;
    /*設定transform屬性爲3d，開啓3d可以開啓手機cpu加速，初始位置爲0，*/
    transform:translate3d(0,0,0);
    -webkit-transform:translate3d(0,0,0);
    -ms-transform:translate3d(0,0,0);
    -o-transform:translate3d(0,0,0);
    -moz-transform:translate3d(0,0,0);
    -webkit-backface-visibility:hide; /*筆記點*/
}

/*當前選中的input的兄弟級，~ 兄弟選擇器，不需要緊鄰，這也是爲什麼剛
開始我們導航條不設置父級的原因，不然選擇不到.st-scroll*/
/*第一屏選中時，.st-scroll的位置在Y軸上不動*/
#st-control-1:checked ~ .st-scroll {
    transform:translateY(0%);
    -moz-transform:translateY(0%);
    -ms-transform:translateY(0%);
    -o-transform:translateY(0%);
    -webkit-transform:translateY(0%);
}
/*第一屏選中時，.st-scroll的位置在Y軸向上移動（-1*100%）也就是一個頁面
的高度*/
#st-control-2:checked ~ .st-scroll {
    transform:translateY(-100%);
    -moz-transform:translateY(-100%);
    -ms-transform:translateY(-100%);
    -o-transform:translateY(-100%);
    -webkit-transform:translateY(-100%);
}
/*第一屏選中時，.st-scroll的位置在Y軸向上移動（-2*100%）也就是2個頁面
的高度*/
#st-control-3:checked ~ .st-scroll {
    transform:translateY(-200%);
    -moz-transform:translateY(-200%);
    -ms-transform:translateY(-200%);
    -o-transform:translateY(-200%);
    -webkit-transform:translateY(-200%);
}
/*以此類推，不斷向上移動*/
#st-control-4:checked ~ .st-scroll {
    transform:translateY(-300%);
    -moz-transform:translateY(-300%);
    -ms-transform:translateY(-300%);
    -o-transform:translateY(-300%);
    -webkit-transform:translateY(-300%);
}
/*以此類推，不斷向上移動*/
#st-control-5:checked ~ .st-scroll {
    transform:translateY(-400%);
    -moz-transform:translateY(-400%);
    -ms-transform:translateY(-400%);
    -o-transform:translateY(-400%);
    -webkit-transform:translateY(-400%);
}

/*設置頁面上方的三角塊，給定一個正方形，然後旋轉45deg，
位置使用translateY(-50%)，自身的一半*/
.st-desc {
    width: 350px;
    height: 350px;
    background-color: #fa96b5;
    position: absolute;
    left: 50%;
    margin-left: -175px;
    z-index: 0;
    transform:translateY(-50%) rotate(45deg);
}

/*屬性前添加內容*/
[data-icon]:after{
    /*attr 調用自定義屬性的內容*/
    content: attr(data-icon);
    width: 350px;
    height: 350px;
    /*background-color: #0f0;*/
    color: #fff;
    font-size: 180px;
    text-align: center;
    line-height: 350px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: rotate(-45deg);
    margin: -100px 0 0 -100px;
    /*字體調用最開始引入的藝術字體*/
    font-family: "raphaelicons";
}

/*設定內容標題樣式*/
.st-panel h2{
    color: #e23a6e;
    font-size: 70px;
    line-height: 50px;
    text-align: center;
    font-weight: 900;
    margin-top: 294px;
    /*文本陰影*/
    text-shadow: 1px 1px 8px rgba(151,24,64,0.5);
}
/*自定義動畫 標題從上到下*/
@-webkit-keyframes moveDown{
    0%{
        -webkit-transform:translateY(-40px);
        opacity: 0;
    }
    100%{
        -webkit-transform:translateY(0px);
        opacity: 1;
    }
}
/*自定義動畫 文本從下到上*/
@-webkit-keyframes moveUp{
    0%{
        -webkit-transform:translateY(40px);
        opacity: 0;
    }
    100%{
        -webkit-transform:translateY(0px);
        opacity: 1;
    }
}
/*標題動畫設置*/
#st-control-1:checked ~ .st-scroll #st-panel-1 h2,
#st-control-2:checked ~ .st-scroll #st-panel-2 h2,
#st-control-3:checked ~ .st-scroll #st-panel-3 h2,
#st-control-4:checked ~ .st-scroll #st-panel-4 h2,
#st-control-5:checked ~ .st-scroll #st-panel-5 h2{
    -webkit-animation:moveDown 1s ease-in-out 0.2s backwards;
    -moz-animation:moveDown 0.6s ease-in-out 0.2s backwards;
    -ms-animation:moveDown 0.6s ease-in-out 0.2s backwards;
    -o-animation:moveDown 0.6s ease-in-out 0.2s backwards;
    animation:moveDown 1s ease-in-out 0.2s backwards;
}

.st-panel p{
    width: 50%;
    font-size: 20px;
    text-align: center;
    margin: 0 auto;
    margin-top: 50px;
    color: #333;
    word-spacing: 8px;
    line-height: 30px;
}
/*文本動畫設置*/
#st-control-1:checked ~ .st-scroll #st-panel-1 p,
#st-control-2:checked ~ .st-scroll #st-panel-2 p,
#st-control-3:checked ~ .st-scroll #st-panel-3 p,
#st-control-4:checked ~ .st-scroll #st-panel-4 p,
#st-control-5:checked ~ .st-scroll #st-panel-5 p{
    -webkit-animation:moveUp 1s ease-in-out 0.2s backwards;
    -moz-animation:moveUp 0.6s ease-in-out 0.2s backwards;
    -ms-animation:moveUp 0.6s ease-in-out 0.2s backwards;
    -o-animation:moveUp 0.6s ease-in-out 0.2s backwards;
    animation:moveUp 1s ease-in-out 0.2s backwards;

}

.st-color{
    background-color: #fa96b5;
}

.st-color [data-icon]:after{
    color: #fa96b5;
}

.st-color .st-desc{
    background-color: #fff;
}
.st-color h2{
    color: #fff;
}

/*媒體查詢,重置樣式*/
@media screen and (max-width: 520px){
    .st-panel h2{
        font-size: 42px;
    }
    .st-panel p{
        width: 90%;
        left: 10%;
        margin-top: 0;
        margin-top: 30px;
    }
    .st-container > a {
        font-size: 13px;
    }
    .st-desc{
        width: 200px;
        height:200px;
        margin-left: -100px;
    }
    [data-icon]:after{
        width: 120px;
        height: 120px;
        font-size: 120px;
    }
    .st-panel h2{
        margin-top:154px; 
    }

}
/*媒體查詢,重置樣式*/
@media  (min-width: 520px) and (max-width: 820px){
    .st-panel h2{
        font-size: 60px;
    }
    .st-panel p{
        width: 90%;
        left: 10%;
        margin-top: 0;
        margin-top: 30px;
    }
    .st-container > a {
        font-size: 14px;
    }
    .st-desc{
        width: 300px;
        height:300px;
        margin-left: -150px;
    }
    [data-icon]:after{
        width: 120px;
        height: 120px;
        font-size: 120px;
    }
    .st-panel h2{
        margin-top:220px; 
    }
}

純css3實現頁面平滑過渡

css3畫出六邊形

css3.flex項目屬性

drawImage()方法調用問題 Canvas

純css3實現頁面平滑過渡

ES6學習之路(四) 數組拓展

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結