这篇博将分享几种纯 css 写的网页导航效果，但在正文开始之前，想跪谢腾讯开发【QQ for Mac 5.3.0或更高版本】自带的 ?? 录屏功能 ?? 向大佬低头 ????
command + control + R 快捷录屏，保存为 gif 格式。酱紫一来就能更完美的展现页面效果噜～ ( ?? .? ?? )?
以下所有效果源码都可以到 这里 下载
1.导航 二级菜单翻转效果
结构创建
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<header>
<nav>
<ul>
<li><img src="img/G222291335.png" alt="logo"/></li>
<li><a href="#">首页</a></li>
<li><a href="#">动态</a></li>
<li class="other_choice">
<a href="#">其他</a>
<ol class="second_menu">
<li><a href="#">其他</a></li>
<li><a href="#">其他</a></li>
<li><a href="#">其他</a></li>
</ol>
</li>
</ul>
</nav>
</header>
|
样式部分
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
header{
height: 44px;
background: linear-gradient(#838DA7,#576070);
}
header ul>li{
float: left;
}
header ul li a {
line-height: 44px;
}
header li{
padding: 0 25px;
}
header ul>li:first-child{
margin-left: 220px;
padding: 0;
box-shadow: 0 0 5px 5px rgba(255,255,255,.2);
}
header li:hover a,.second_menu li>a{
color:#fff;
}
.other_choice{
position: relative;
}
.second_menu{
width: 100%;
position: absolute;
left: 0;
visibility: hidden;
}
.second_menu li{
width: 100%;
text-align: center;
box-sizing: border-box;
background-color: #8E816F;
border-bottom: 1px solid #D6D6D8;
transform: rotateY(180deg);
transition: all linear 400ms;
}
.other_choice:hover .second_menu{
visibility: visible;
}
.other_choice:hover .second_menu>li{
transform: skew(180deg);
}
.second_menu>li:nth-child(3){
transition-delay:0ms;
}
.second_menu>li:nth-child(2){
transition-delay:300ms;
}
.second_menu>li:nth-child(1){
transition-delay:600ms;
}
/*一级菜单最后一项 移入后 二级菜单选项*/
.other_choice:hover .second_menu li:first-child{
transition-delay: 0s;
}
.other_choice:hover .second_menu li:nth-child(2){
transition-delay: 300ms;
}
.other_choice:hover .second_menu li:nth-child(3){
transition-delay: 600ms;
}
|
实现这个效果的关键点在于第37行及以后的代码，将二级菜单通过 transform rotate Y轴翻转，再移入翻转回正面。配合延时，是不是棒棒哒 ?( ? )?
2.导航 延展线效果
结构创建
1
2
3
4
5
6
7
8
9
|
<header>
<nav>
<ul>
<li><a href="#">first</a></li>
<li><a href="#">second</a></li>
<li><a href="#">third</a></li>
</ul>
</nav>
</header>
|
样式部分
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
header ul{
overflow: hidden;
padding-bottom: 3px;
background: linear-gradient(#838DA7,#576070);
}
header li{
padding-bottom: 5px;
float: left;
margin-left: 100px;
position: relative;
}
header li a{
font-size: 30px;
}
header li:hover a{
color: #fff;
}
header li:before{
content:"";
width: 0;
border-bottom: 5px solid rgba(255,255,255,.2);
position: absolute;
left: 50%;
bottom: 0;
transition: all linear .5s;
}
header li:hover:before{
width: 100%;
left: 0;
}
|
实现这个效果的关键点在于利用伪元素从0到100%的宽度以及位置的变化做出效果
3.导航 延展线效果2
结构创建
1
2
3
4
|
<ul class="nav3">
<li><a href="#">first</a></li>
<li><a href="#">second</a></li>
</ul>
|
样式部分
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
大专栏
你能用CSS为导航添加的效果line">26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
.nav3{
width: 300px;
margin: auto;
}
.nav3 li{
float: left;
width: 120px;
height: 40px;
transform: skew(-20deg);
background: linear-gradient(#838DA7,#576070);
margin-left: 20px;
}
.nav3 li a{
color: #fff;
display: block;
line-height: 40px;
text-align: center;
transform: skew(20deg);
}
.nav3 li:first-child:before{
content: "";
width:0;
height: 0;
border-top: 4px solid #576070;
position: absolute;
bottom: 0;
left: -160px;
}
.nav3 li:first-child:hover:before{
width: 80%;
left: 0;
transition: all linear 300ms;
}
.nav3 li:last-child:before{
content: "";
width: 0;
height: 0;
border-top: 4px solid #838DA7;
position: absolute;
top: 0;
left: 279px;
}
.nav3 li:last-child:hover:before{
width: 80%;
left:10%;
transition: all linear 300ms;
}
|
对此我并不想说啥 ?( ? )?
4.导航 震动效果
结构创建
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<div class="movie_show">
<ul>
<li>
<a href="#"><img src="img/movie_pic15.png" alt="银河护卫队2"/></a>
<h2>《银河护卫队2》</h2>
<time>2017.5.5</time>
</li>
<li>
<time>2008.8.20</time>
<h2>《无敌浩克》</h2>
<a href="#"><img src="img/movie_pic02.png" alt="浩克"/></a>
</li>
<li>
<a href="#"><img src="img/movie_pic03.png" alt="钢铁侠2"/></a>
<h2>《钢铁侠2》</h2>
<time>2010.4.25</time>
</li>
<li>
<time>2011.5.2</time>
<h2>《奇异博士》</h2>
<a href="#"><img src="img/movie_pic14.png" alt="奇异博士"/></a>
</li>
<li>
<a href="#"><img src="img/movie_pic05.png" alt="美队"/></a>
<h2>《美国队长》</h2>
<time>2011.7.19</time>
</li>
<li>
<time>2018.11.2</time>
<h2>《惊奇队长》</h2>
<a href="#"><img src="img/movie_pic19.png" alt="惊奇队长"/></a>
</li>
</ul>
</div>
|
样式部分
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
|
.movie_show{
width: 100%;
height: 500px;
background: url("img/movie_bj.jpg") center;
}
.movie_show ul{
width: 1020px;
height: 450px;
overflow: hidden;
margin: auto;
text-align: center;
display: flex;
}
.movie_show ul li{
height: 244px;
cursor: pointer;
flex-grow: 1;
font-size: 0;
color: #ffffff;
text-align: center;
}
.movie_show li:hover{
color: #f32c1e;
}
.movie_show ul li:nth-child(even){
align-self:flex-end;
}
.movie_show li>h2,.movie_show li>time {
font-size: 18px;
}
.movie_show li time{
width: 118px;
height: 40px;
line-height: 40px;
text-align: center;
display: block;
}
.movie_show li:hover time{
background:url("img/icon.png") 0 -312px;
}
.movie_show ul li:nth-child(odd) time{
margin: 32px auto 0;
}
.movie_show ul li:nth-child(even) time{
margin: 0 auto 26px;
}
.movie_show li:hover time{
background:url("img/icon.png") 0 -312px;
}
.movie_show li a{
display: block;
}
.movie_show li:nth-child(1)>a{
background:url("img/movie_pic15.png") no-repeat center;
}
.movie_show li:nth-child(2)>a{
background:url("img/movie_pic02.png") no-repeat center;
}
.movie_show li:nth-child(3)>a{
background:url("img/movie_pic03.png") no-repeat center;
}
.movie_show li:nth-child(4)>a{
background:url("img/movie_pic14.png") no-repeat center;
}
.movie_show li:nth-child(5)>a{
background:url("img/movie_pic05.png") no-repeat center;
}
.movie_show li:nth-child(6)>a{
background:url("img/movie_pic19.png") no-repeat center;
}
.movie_show li:hover img{
opacity: 0;
transform: scale(1.5);
transition: all 1s linear;
}
|
这个效果的关键点在于将同一个图片作为 img 和 bg-img 重叠，在移入后将 img 通过 transform 放大 Σ( ???) 居然还有这种操作
至于这样 “W” 形的排版，opsition 可以做，但在这个例子中我使用了弹性盒模型 flex 也是棒棒哒 (????????)??????