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

时间：2017-08-26 18:42:32 阅读：247 评论：0 收藏：0 [点我收藏+]

标签：splay als pac ati var bsp from 没有 service

一、行走的线条。

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

技术分享

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特效第二篇--行走的线条&&置顶导航栏

标签：splay als pac ati var bsp from 没有 service

原文地址：http://www.cnblogs.com/getchen/p/7435367.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行