[知了堂学习笔记]_css3特效第二篇--行走的线条&&置顶导航栏

一、行走的线条。

• 效果图（加载可能会慢一点儿，请稍等...）：

     

 

 

• html代码：

 1 <div class="movingLines"> 2     <img src="images/ser2.jpg" alt=""><!-- 背景图片--> 3     <div class="cover cover2"><!-- 遮盖层--> 4         <div class="innerBor"> <!--四根线条--> 5             <p class="topHr"/> 6             <p class="rightHr"/> 7             <p class="leftHr"/> 8             <p class="bottomHr"/> 9         </div>10 11         <div class="content"><!-- 遮盖层内容 -->12             <img class="serIcon" src="images/ser_pre2.png" alt="">13             <h6><a href="">家具与软装顾问</a></h6>14             <p>除了家居设计，特别推出空间软装布置顾问，2对1全程指导，为您提供功能于色彩建议、配饰与摆设建议，杜绝爱巢变成“杂货铺”</p>15         </div>16     </div>17 </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代码：不仅有改变四根线的动画代码，还有改变遮盖层的透明度、遮盖层中文字内容放大缩小、透明度的动画代码，图片放大缩小、平移的代码。是不是很全？

  1 .movingLines {  2         width: 350px;  3         height: 246px;  4         position: relative;  5 }  6   7 .movingLines  img{  8     width: 100%;  9     height: 100%; 10 } 11 .movingLines .cover2{ 12         width: 100%; 13         height: 100%; 14         position: absolute; 15         top:0px; 16         left: 0px; 17         text-align: center; 18         transition: all .5s linear; 19         background: #6DD3D1; 20 } 21  22 .movingLines .innerBor{ 23  24         width: 90%; 25         height: 90%; 26         position: absolute; 27         top: 5%; 28         left: 5%; 29         display: block; 30         border: 1px solid #747474; 31         transition: all .5s linear; 32  33 } 34  35 .movingLines .content{ 36     width: 90%; 37     height: 90%; 38     position: absolute; 39     top: 5%; 40     left: 5%; 41     text-align: center; 42     background: red; 43 } 44  45 .movingLines .topHr{ 46     display: block; 47     position: absolute; 48     top: -1px; 49     right:0; 50     width: 0%; 51     height: 1px; 52     background: white; 53     transition: all .5s linear; 54 } 55  56 .movingLines .rightHr{ 57     display: block; 58     position: absolute; 59     top: 0; 60     right:-1px; 61     width: 1px; 62     height: 0%; 63     background: white; 64     transition: all .5s linear; 65 } 66  67 .movingLines .bottomHr{ 68     display: block; 69     position: absolute; 70     bottom: -1px; 71     left:0; 72     width: 0; 73     height: 1px; 74     background: white; 75     transition: all .5s linear; 76 } 77  78 .movingLines .leftHr{ 79     display: block; 80     position: absolute; 81     bottom: 0; 82     left:-1px; 83     width: 1px; 84     height: 0%; 85     background: white; 86     transition: all .5s linear; 87 } 88  89  90 .movingLines .serIcon{ 91     width: 40px; 92     height: 40px; 93     margin-top: 60px; 94     transition: all .5s linear; 95 } 96 .movingLines h6 { 97     transition: all .5s linear; 98 } 99 .movingLines h6 a{100     color: white;101     font-size: 16px;102 103 }104 .movingLines .content p{105     opacity: 0;106     font-size: 14px;107     transform: scale(0,0);108     transition: all .5s linear;109 110 }111 112 .movingLines:hover .serIcon{113     transform: translateY(-30px) scale(.5,.5);114     transition: all .5s linear;115 }116 117 .movingLines:hover h6{118     transform: translateY(-30px);119     transition: all .5s linear;120 }121 .movingLines:hover p{122     opacity: 1;123     transform: scale(1,1);124     transition: all .5s linear;125 }126 .movingLines:hover .topHr{127     width: 100%;128     transition: all .5s linear;129 }130 131 .movingLines:hover .rightHr{132     height: 100%;133     transition: all .5s linear;134 }135 136 .movingLines:hover .bottomHr{137     width: 100%;138     transition: all .5s linear;139 }140 141 .movingLines:hover .leftHr{142     height: 100%;143     transition: all .5s linear;144 }145 146 .movingLines:hover .cover{147     background: rgba(0,0,0,.7);148     transition: all .5s linear;149 }150 151 152 .movingLines .cover:hover span{153     animation: service_span_anim 1s linear forwards;154 }155 156 @keyframes service_span_anim{157     from{border-width: 1px;border-color: #000;}158     to{border-width: 0px;border-color: red;}159 }

二、置顶导航栏

• 效果图（加载可能会慢一点儿，请稍等...）：

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

  博客园主页：GET_CHEN主页

　　以上为今天的所有分享，如需了解更加深入的知识，请大家进入知了堂社区：http://www.zhiliaotang.com/portal.php;
　　　　请大家多多指教，欢迎提意见，非诚勿扰！！！
　　　　　　　　　　　　 　　　　　　　　---By GET_CHEN　　　　

转载请注明出处；