一、行走的线条。
- 效果图（加载可能会慢一点儿，请稍等...）：
- html代码：
<div class="movingLines">
<img src="data: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="data: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:;
width: 0%;
height: 1px;
background: white;
transition: all .5s linear;
}
.movingLines .rightHr{
display: block;
position: absolute;
top:;
right:-1px;
width: 1px;
height: 0%;
background: white;
transition: all .5s linear;
}
.movingLines .bottomHr{
display: block;
position: absolute;
bottom: -1px;
left:;
width:;
height: 1px;
background: white;
transition: all .5s linear;
}
.movingLines .leftHr{
display: block;
position: absolute;
bottom:;
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:;
width: 0%;
height: 1px;
background: white;
transition: all .5s linear;
}
.movingLines .rightHr{
display: block;
position: absolute;
top:;
right:-1px;
width: 1px;
height: 0%;
background: white;
transition: all .5s linear;
}
.movingLines .bottomHr{
display: block;
position: absolute;
bottom: -1px;
left:;
width:;
height: 1px;
background: white;
transition: all .5s linear;
}
.movingLines .leftHr{
display: block;
position: absolute;
bottom:;
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:;
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:;
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是不是很强大？快学起来吧。