css3 menu 手机菜单1

首先看一下效果图;

 

效果1,主要是 translateY(100px) -->translateY(0px);opacity:0;—>opacity: 1; 然后递归延迟 怕麻烦也可以自己写个for循环

1
2
.one a {transform: translateY(100px); opacity:0;}
.one:hover a {transform: translateY(0px);-webkit-transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: all 0.4s ease-in-out ; opacity: 1;}

 

效果2,主要是 translateX(100px) -->translateX(0px);opacity:0;—>opacity: 1; 然后递归延迟

1
2
.two a {transform:  translateX(100px); opacity: 0;}
.two:hover a {transform: translateX(0);transition: all 0.4s ease-in-out ; opacity: 1;}

 

效果3,主要是 translateY(100px) -->translateY(0px);translateX(100px) -->translateX(0px);opacity:0;—>opacity: 1; 然后递归延迟

1
2
.three a {transform: translateY(100px) translateX(100px); opacity: 0;}
.three:hover a {transform: translateY(0px) translateX(0); transition: all 0.4s; opacity: 1;}

 

效果4,主要是在上面3的基础上,css3 奇偶 判断; 然后递归延迟

1
2
3
.four li:nth-child(odd) b {transform: translateY(100px) translateX(100px); opacity: 0;}
.four li:nth-child(even) b {transform: translateY(100px) translateX(-100px); opacity: 0;}
.four:hover li b {transform: translateY(0px) translateX(0); transition: all .4s; opacity: 1;}

 

一下下是源代码:

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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3侧边栏菜单1</title>   
<!--[if IE]>
        <script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
     
    <style type="text/css">
          /*Fontawesome Iconfont*/
          @import url(http://libs.useso.com/js/font-awesome/4.0.1/css/font-awesome.min.css);
          @import url(http://fonts.useso.com/css?family=Montserrat);
        * {margin: 0; padding: 0;}
         ul,li {margin: 0; padding: 0;list-style-type: none;}
           
         h1{width:1450px;margin: 0 auto; height:80px; line-height:80px;}
           
        .grid {width:1500px;margin: 0 auto;}
        .grid > li { width:320px; height: 480px; overflow: hidden; float: left; margin: 20px 0 20px 30px; position: relative; }
        .grid > li:hover {box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.5);}
 
        .grid>li section {position: relative; transition: all 0.25s; width:320px; height:480px;}
        .grid>li h2 {font: bold 14px montserrat; color: #eeeeee; text-transform: uppercase; position: absolute; text-align: center; width: 60%; left: 20%; top:48px; padding: 10px 0; border:1px solid white; border-radius: 4px;}
 
        .sidenav { position: absolute; top: 0; left: 0; bottom: 0; background: linear-gradient(rgba(50,60,60, 1), rgba(50,60,60, 0.7)); width: 50px; transition: all 0.25s; overflow: hidden; padding-top: 100px;}
        .sidenav li { _overflow: hidden; width: 150px; }
        .sidenav a { text-decoration: none; color: #eee;  display: block; line-height: 48px;  }
        .sidenav span {display: block;}
        .sidenav b { padding-left 10px; display: block; color: white; font-family: Montserrat; font-size: 12px; line-height: 4; opacity: 0; }
        .sidenav a i { display: block; float: left; font-size: 16px; line-height: 48px; width: 50px; text-align: center; }
 
        /*All instances*/
        section{ background:url(../../../images/TaylorSwift.jpg) no-repeat #333 center center /contain;  height:500px;}
        .grid>li:hover .sidenav {width: 150px;}
        .grid>li:hover section {margin-left: 140px;}
        .grid>li:hover b {opacity: 1;}
 
 
        /*one*/
        .one li {overflow: visible;}
        .one a {transform: translateY(100px); opacity:0;}
        .one:hover a {transform: translateY(0px);-webkit-transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: all 0.4s ease-in-out ; opacity: 1;}
 
        /*two*/
        .two li {overflow: visible;}
        .two a {transform:  translateX(100px); opacity: 0;}
        .two:hover a {transform: translateX(0);transition: all 0.4s ease-in-out ; opacity: 1;}
         
         
        /*Three*/
        .three li {overflow: visible;}
        .three a {transform: translateY(100px) translateX(100px); opacity: 0;}
        .three:hover a {transform: translateY(0px) translateX(0); transition: all 0.4s; opacity: 1;} 
         
 
        /*Four*/
        .four li {overflow: visible; width: 150px;}
        .four li a i {opacity: 0; transition: all 0.4s;}
        .four li:nth-child(odd) b {transform: translateY(100px) translateX(100px); opacity: 0;}
        .four li:nth-child(even) b {transform: translateY(100px) translateX(-100px); opacity: 0;}
        .four:hover li b {transform: translateY(0px) translateX(0); transition: all .4s; opacity: 1;}
        .four:hover li a i {opacity: 1;}
         
         
         
        /*时间延迟 */
        .sidenav li:nth-child(1) b, .sidenav li:nth-child(1) a, .sidenav li:nth-child(1) i {transition-delay: .08s;}
        .sidenav li:nth-child(2) b, .sidenav li:nth-child(2) a, .sidenav li:nth-child(2) i {transition-delay: .16s;}
        .sidenav li:nth-child(3) b, .sidenav li:nth-child(3) a, .sidenav li:nth-child(3) i {transition-delay: .24s;}
        .sidenav li:nth-child(4) b, .sidenav li:nth-child(4) a, .sidenav li:nth-child(4) i {transition-delay: .32s;}
        .sidenav li:nth-child(5) b, .sidenav li:nth-child(5) a, .sidenav li:nth-child(5) i {transition-delay: .40s;}
        .sidenav li:nth-child(6) b, .sidenav li:nth-child(6) a, .sidenav li:nth-child(6) i {transition-delay: .48s;}
    </style>
     
</head>
<body>
        <h1>利用 translateX 或者  translateY </h1>
        <ul class="grid">
            <li class="one">
                <ul class="sidenav">
                    <li><a><i class="fa fa-check"></i><b>往上</b></a></li>
                    <li><a><i class="fa fa-inbox"></i><b>Messages</b></a></li>
                    <li><a><i class="fa fa-pencil"></i><b>New Post</b></a></li>
                    <li><a><i class="fa fa-cog"></i><b>Settings</b></a></li>
                    <li><a><i class="fa fa-star"></i><b>Starred</b></a></li>
                    <li><a><i class="fa fa-power-off"></i><b>Logout</b></a></li>
                </ul>
                <section>
                    <h2>Slide Up</h2>
                </section>
            </li>
             
             
            <li class="two">
                <ul class="sidenav">
                    <li><a><i class="fa fa-check"></i><b>左边</b></a></li>
                    <li><a><i class="fa fa-inbox"></i><b>Messages</b></a></li>
                    <li><a><i class="fa fa-pencil"></i><b>New Post</b></a></li>
                    <li><a><i class="fa fa-cog"></i><b>Settings</b></a></li>
                    <li><a><i class="fa fa-star"></i><b>Starred</b></a></li>
                    <li><a><i class="fa fa-power-off"></i><b>Logout</b></a></li>
                </ul>
                <section>
                    <h2>Slide Left</h2>
                </section>
            </li>
             
             
            <li class="three">
                <ul class="sidenav">
                    <li><a><i class="fa fa-check"></i><b>下左同时</b></a></li>
                    <li><a><i class="fa fa-inbox"></i><b>Messages</b></a></li>
                    <li><a><i class="fa fa-pencil"></i><b>New Post</b></a></li>
                    <li><a><i class="fa fa-cog"></i><b>Settings</b></a></li>
                    <li><a><i class="fa fa-star"></i><b>Starred</b></a></li>
                    <li><a><i class="fa fa-power-off"></i><b>Logout</b></a></li>
                </ul>
                <section>
                    <h2>Slide Top Left</h2>
                </section>
            </li>
             
             
            <li class="four">
                <ul class="sidenav">
                    <li><a><i class="fa fa-check"></i><b>奇偶交叉</b></a></li>
                    <li><a><i class="fa fa-inbox"></i><b>Messages</b></a></li>
                    <li><a><i class="fa fa-pencil"></i><b>New Post</b></a></li>
                    <li><a><i class="fa fa-cog"></i><b>Settings</b></a></li>
                    <li><a><i class="fa fa-star"></i><b>Starred</b></a></li>
                    <li><a><i class="fa fa-power-off"></i><b>Logout</b></a></li>
                </ul>
                <section>
                    <h2>Criss-Cross</h2>
                </section>
            </li>
        </ul>
</body>
</html>
posted @   surfaces  阅读(248)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示