一、行走的线条。
- 效果图（加载可能会慢一点儿，请稍等...）：
- 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是不是很强大？快学起来吧。
以上为今天的所有分享，如需了解更加深入的知识，请大家进入知了堂社区：http://www.zhiliaotang.com/portal.php;
请大家多多指教，欢迎提意见，非诚勿扰！！！
---By ?GET_CHEN
[知了堂学习笔记]_css3特效第二篇--行走的线条&&置顶导航栏
原文地址：http://www.cnblogs.com/getchen/p/7435367.html