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是不是很强大？快学起来吧。