css3特效第二篇--行走的线条置顶导航栏

一、行走的线条。

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

html代码：

 1 <div class="movingLines">
 2     <img src="data: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="data: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是不是很强大？快学起来吧。

转载于:https://www.cnblogs.com/getchen/p/7435367.html

css3特效第二篇--行走的线条置顶导航栏相关推荐

Avalonia跨平台入门第九篇之控件置顶和置底
在前面分享的几篇中咱已经玩耍了Popup.ListBox多选.Grid动态分.RadioButton模板.控件的拖放效果;今天趁着有时间接着对拖放到Canvas上的控件进行置顶和置底切换的效果,最终实 ...
JS实现动画特效2（缓动函数封装、导航栏筋斗云效果）
JS实现的动画特效:手风琴特效展示图片.筋斗云动画一.小知识 1.浏览器的offsetLeft是就近取整,要实现向上取整或向下取整,可以调用Math.ceil()或Math.floor() 2.想要 ...
CSS3——对齐组合选择符伪类伪元素导航栏下拉菜单
水平&垂直对齐元素居中对齐 .center {margin: auto;width: 50%;border: 3px solid green;padding: 10px; } 文本居中对齐 ...
去除导航栏的背景色和底部1像素黑色线条or隐藏导航栏
一般项目我们都用创建一个公用的导航控制器,然后定义我们所需要的一些按钮啊样式啊等 - (void)pushViewController:(UIViewController *)viewContro ...
第二十七篇导航栏和内容块
导航栏和内容块上节课留下了一个小练习: 老师做了一份,但是没有图片图标,所以代码里没有用到 img 标签. 在写之前,我们要分析吧,这个页面,难度只有左侧的导航栏.因为动态! 我们可以用到jQuer ...
博客文章的置顶功能『博客帮助』
已经有不止一个博友不止一次地呼吁:我想要文章置顶功能!好,这不就来了嘛. 文章置顶有什么好处呢?可以将你有代表性的博文,或者你的最得意之作,或者你最想让你的读者第一眼看到的文章,推到你博客文章的顶部. ...
随着滚动条下拉，导航栏置顶
随着滚动条下拉,导航栏置顶想做一个这样的效果,当我们下拉滚动条时,写的导航栏置顶. 这是效果图先学习用到的基本知识 jQuery CSS 操作 - scrollTop() 方法 scrollTop ...
Android 开发：（十四）NavigationBar篇-自定义顶部导航栏
本篇记录了navigation bar顶部导航栏的自定义方法,抛砖引玉,简单实现了常用的布局,在此基础上可添加较复杂的布局. 第一步:新建NavigationBar文件,继承与FrameLayout. ...
html5导航栏悬浮置顶,（微信小程序）导航栏悬浮吸顶以及置顶的设置
前言最近在做小程序的项目,遇到一些问题放在这里,一来作为自己经验收集册,收集自己的项目遇到的问题或者做的东西:二来将自己遇到的问题经验分享出来前景提要吸顶功能页面设置在静态的首页,作为一个首页展 ...

css3特效第二篇--行走的线条置顶导航栏

css3特效第二篇--行走的线条置顶导航栏相关推荐

最新文章

热门文章