css3特效第二篇--行走的線條&&置頂導航欄

一、行走的線條。

• 效果圖（加載可能會慢一點兒，請稍等...）：

     

 

 

• html代碼：

<div class="movingLines">
    <img src="images/ser2.jpg" alt=""><!-- 背景圖片-->
    <div class="cover cover2"><!-- 遮蓋層-->
        <div class="innerBor"> <!--四根線條-->
            <p class="topHr"/>
            <p class="rightHr"/>
            <p class="leftHr"/>
            <p class="bottomHr"/>
        </div>

        <div class="content"><!-- 遮蓋層內容 -->
            <img class="serIcon" src="images/ser_pre2.png" alt="">
            <h6><a href="">家具與軟裝顧問</a></h6>
            <p>除了家居設計，特別推出空間軟裝布置顧問，2對1全程指導，為您提供功能於色彩建議、配飾與擺設建議，杜絕愛巢變成“雜貨鋪”</p>
        </div>
    </div>
</div>

 

•  思路一：先不要管線條的動畫效果，首先分析出靜態的布局，將遮蓋層與底層布局完成，調試好層級關系和位置關系。通過定位使得 .content 遮蓋層和 .innerBor 都位於整個div的中間部分，並且是重合的。

• css樣式：

.movingLines {
        width: 350px;
        height: 246px;
        position: relative;
}

 /*背景圖片*/

.movingLines img{ width: 100%; height: 100%; }

/*遮蓋層*/
.movingLines .cover2{ 

        width: 100%;
        height: 100%;
        position: absolute;
        top:0px;
        left: 0px;
        text-align: center;
        transition: all .5s linear;
        background: #6DD3D1;
}

.movingLines .innerBor{

        width: 90%;
        height: 90%;
        position: absolute;
        top: 5%;
        left: 5%;
        display: block;
        border: 1px solid #747474;
        transition: all .5s linear;

}

.movingLines .content{
    width: 90%;
    height: 90%;
    position: absolute;
    top: 5%;
    left: 5%;
    text-align: center;
    background: red;
}

• 思路二：當思路一種的布局弄好以后，遮蓋層中的.innerBor是位於.content的底層的。由於.content靜態的時候就存在外邊框的，但是鼠標浮動的時候，這個邊框依然是存在的，但是不能直接給.content 加邊框，因為.innerBor是位於它的下一層，不論怎么修改底層的東西，都不可能遮蓋上一級的內容。所以這個靜態的邊框線一定是.innerBor的，並且是border，而不是outline（這里不贅述二者的區別）。由於二者是同樣的大小，並且沒有設定overflow:hidden，這樣給.innerBor加 border的時候，邊框線就會在content的非遮蓋范圍內，就可以看見了。
• 思路三：這下只需要給innerBor加上移動的線條就行了。怎么加？不可能使用border，因為它已經被靜態的頁面占用了，就算沒有占用，css里面也沒有適合的api.換一個思路，這四根線像不像只有1px的四個div，在不斷的增加高度或者寬度？是的沒錯，但是html中不建議使用空的div，所以把其改成p標簽，讓其display：block;就是一個塊元素了，就可以改變寬高了。
• 思路四：將其定位到四個角的位置。注意：起始位置。此外由於所有的p標簽都位於.innerBor的內部，所以定位的時候定位位置是-1px；這樣才能遮蓋住border。

• css代碼

.movingLines .topHr{
    display: block;
    position: absolute;
    top: -1px;
    right:0;
    width: 0%;
    height: 1px;
    background: white;
    transition: all .5s linear;
}

.movingLines .rightHr{
    display: block;
    position: absolute;
    top: 0;
    right:-1px;
    width: 1px;
    height: 0%;
    background: white;
    transition: all .5s linear;
}

.movingLines .bottomHr{
    display: block;
    position: absolute;
    bottom: -1px;
    left:0;
    width: 0;
    height: 1px;
    background: white;
    transition: all .5s linear;
}

.movingLines .leftHr{
    display: block;
    position: absolute;
    bottom: 0;
    left:-1px;
    width: 1px;
    height: 0%;
    background: white;
    transition: all .5s linear;
}

• 思路五：添加鼠標浮動事件，不廢話了直接上代碼

.movingLines:hover .topHr{
    width: 100%;
    transition: all .5s linear;
}

.movingLines:hover .rightHr{
    height: 100%;
    transition: all .5s linear;
}

.movingLines:hover .bottomHr{
    width: 100%;
    transition: all .5s linear;
}

.movingLines:hover .leftHr{
    height: 100%;
    transition: all .5s linear;
}

.movingLines:hover .cover{
    background: rgba(0,0,0,.7);
    transition: all .5s linear;
}

• 完整的css代碼：不僅有改變四根線的動畫代碼，還有改變遮蓋層的透明度、遮蓋層中文字內容放大縮小、透明度的動畫代碼，圖片放大縮小、平移的代碼。是不是很全？

.movingLines {
        width: 350px;
        height: 246px;
        position: relative;
}

.movingLines  img{
    width: 100%;
    height: 100%;
}
.movingLines .cover2{
        width: 100%;
        height: 100%;
        position: absolute;
        top:0px;
        left: 0px;
        text-align: center;
        transition: all .5s linear;
        background: #6DD3D1;
}

.movingLines .innerBor{

        width: 90%;
        height: 90%;
        position: absolute;
        top: 5%;
        left: 5%;
        display: block;
        border: 1px solid #747474;
        transition: all .5s linear;

}

.movingLines .content{
    width: 90%;
    height: 90%;
    position: absolute;
    top: 5%;
    left: 5%;
    text-align: center;
    background: red;
}

.movingLines .topHr{
    display: block;
    position: absolute;
    top: -1px;
    right:0;
    width: 0%;
    height: 1px;
    background: white;
    transition: all .5s linear;
}

.movingLines .rightHr{
    display: block;
    position: absolute;
    top: 0;
    right:-1px;
    width: 1px;
    height: 0%;
    background: white;
    transition: all .5s linear;
}

.movingLines .bottomHr{
    display: block;
    position: absolute;
    bottom: -1px;
    left:0;
    width: 0;
    height: 1px;
    background: white;
    transition: all .5s linear;
}

.movingLines .leftHr{
    display: block;
    position: absolute;
    bottom: 0;
    left:-1px;
    width: 1px;
    height: 0%;
    background: white;
    transition: all .5s linear;
}


.movingLines .serIcon{
    width: 40px;
    height: 40px;
    margin-top: 60px;
    transition: all .5s linear;
}
.movingLines h6 {
    transition: all .5s linear;
}
.movingLines h6 a{
    color: white;
    font-size: 16px;

}
.movingLines .content p{
    opacity: 0;
    font-size: 14px;
    transform: scale(0,0);
    transition: all .5s linear;

}

.movingLines:hover .serIcon{
    transform: translateY(-30px) scale(.5,.5);
    transition: all .5s linear;
}

.movingLines:hover h6{
    transform: translateY(-30px);
    transition: all .5s linear;
}
.movingLines:hover p{
    opacity: 1;
    transform: scale(1,1);
    transition: all .5s linear;
}
.movingLines:hover .topHr{
    width: 100%;
    transition: all .5s linear;
}

.movingLines:hover .rightHr{
    height: 100%;
    transition: all .5s linear;
}

.movingLines:hover .bottomHr{
    width: 100%;
    transition: all .5s linear;
}

.movingLines:hover .leftHr{
    height: 100%;
    transition: all .5s linear;
}

.movingLines:hover .cover{
    background: rgba(0,0,0,.7);
    transition: all .5s linear;
}


.movingLines .cover:hover span{
    animation: service_span_anim 1s linear forwards;
}

@keyframes service_span_anim{
    from{border-width: 1px;border-color: #000;}
    to{border-width: 0px;border-color: red;}
}

二、置頂導航欄

• 效果圖（加載可能會慢一點兒，請稍等...）：

• html代碼和css代碼就不提供了，大家可以寫一個<header></header> 設置它的寬100%和高80px，加一個背景色模擬一個簡單的導航欄就行了。

• 思路：導航欄原本只是靜態的在一個特定的位置，並且背景為（background:transparent;）透明的。但隨着滑動鼠標，會固定到頂部和回到原來的位置。
• 說明：這里面，不僅涉及到固定定位還涉及到對滾動條的監聽，因為是根據滾動條的位置來設定導航欄的的位置的。這里需要使用一些js來實現，我采用的是非原生的js----jquery，不知道的小伙伴自行查閱資料(友情鏈接：http://www.runoob.com/jquery/jquery-tutorial.html)。

• 呈上js代碼：

$(function(){

    var isToTop = false;//設置一個標記，來記錄導航欄是否位於頂部
    $(window).scroll(function(){
        var scrollTop = $(this).scrollTop();//獲取滾動條
         if(scrollTop>80&&!isToTop){//當滾動條的高度大於80px,並且導航欄不是位於頂部的時候，通過jq給header添加css樣式使其固定定位到瀏覽器可視窗口的頂部
             $("header").css({
                 "position":"fixed",
                 "top":"0",
                 "background":"rgb(51,51,51)",
                 "transition":"all .5s linear"
             });

             isToTop = true;
         } 
//當滾動條的高度小於80px,並且導航欄是位於頂部的時候，通過jq給header添加css樣式使其回到原始的位置。
         if(scrollTop<80&&isToTop){
                 $("header").css({
                 "position":"absolute",
                 "top":"40px",
                 "background":"transparent",
                 "transition":"all .5s linear"
             });
             isToTop = false;
         }
    });
});
    

• 其實這個案例只要懂得用js獲取滾動條對象，並獲取其高度。以及會用js給html頁面元素添加css樣式，就可以實現。js是不是很強大？快學起來吧。