css3导航动画切换

Posted on | In

我们浏览有些手机网站时，有时会发现页面的导航打开动画很有意思，类似下图这种：

nav

现在我们用html input表单以及css3实现这个功能，原理如下：

  • html为用input 与label表单，label下边三个div表示导航的三条横线；

  • 当点击label时，input会选中,与之对应的label下边三个div执行动画,其中第二个div让宽度为0，位置发生变化，第一个与第三个div执行旋转动画，形成×；

  • 再次点击取消选中时，利用input的属性，恢复到选中之前的状态。

html代码如下：

1
2
3
4
5
6
7
8
<div class="nav_bar">
    <input type="checkbox" id="nemu_button">
    <label for="nemu_button">
         <div class="line_top transition"></div>
         <div class="line_meddle transition"></div>
         <div class="line_bottom transition"></div>
    </label>
</div>

css代码如下：

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

/*过渡动画transition*/
.transition {
	-webkit-transition: all .25s ease-in-out;
	   -moz-transition: all .25s ease-in-out;
	    -ms-transition: all .25s ease-in-out;
	     -o-transition: all .25s ease-in-out;
	        transition: all .25s ease-in-out;
}

#nemu_button {
    position: absolute;
    left: 9999px;
}
label {
	position: absolute;
	right:50px;
	cursor:pointer;
}
label>div {
	width: 30px;
	height: 2px;
	margin-bottom: 8px;
	background: #fff;
}
/*input选中是 label下边的三条横线的过渡动画*/
input:checked + label .line_top {
	margin-top: 15px;
	-webkit-transform: rotate(-45deg);
	   -moz-transform: rotate(-45deg);
	    -ms-transform: rotate(-45deg);
	     -o-transform: rotate(-45deg);
	        transform: rotate(-45deg);
}
input:checked + label .line_meddle {
	width: 0;
	margin-top: -15px;
	margin-left: 15px;
}
input:checked + label .line_bottom {
	margin-top: -5px;
	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	     -o-transform: rotate(45deg);
	        transform: rotate(45deg);
}