闲话不说,直接上代码....
1 <div class="menu">
2 <div class="btn btn-trigger">
3 <span class="line"></span>
4 </div>
5 <div class="icons">
6 <div class="rotater">
7 <div class="btn btn-icon">
8 <i class="fa fa-codepen"></i>
9 </div>
10 </div>
11 <div class="rotater">
12 <div class="btn btn-icon">
13 <i class="fa fa-facebook"></i>
14 </div>
15 </div>
16 <div class="rotater">
17 <div class="btn btn-icon">
18 <i class="fa fa-google-plus"></i>
19 </div>
20 </div>
21 <div class="rotater">
22 <div class="btn btn-icon">
23 <i class="fa fa-twitter"></i>
24 </div>
25 </div>
26 <div class="rotater">
27 <div class="btn btn-icon">
28 <i class="fa fa-dribbble"></i>
29 </div>
30 </div>
31 <div class="rotater">
32 <div class="btn btn-icon">
33 <i class="fa fa-linkedin"></i>
34 </div>
35 </div>
36 <div class="rotater">
37 <div class="btn btn-icon">
38 <i class="fa fa-github"></i>
39 </div>
40 </div>
41 <div class="rotater">
42 <div class="btn btn-icon">
43 <i class="fa fa-behance"></i>
44 </div>
45 </div>
46 </div>
47 </div>
View Code
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'>
@charset "utf-8";
/* CSS Document */
*, *:before, *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
height: 100%;
overflow: hidden;
}
body{
/* 渐变三个参数:1.方向 2.起点颜色 3.终点颜色 */
background:-webkit-linear-gradient(45deg, #e10522 0%, rgba(225, 5, 34, 0) 70%), -webkit-linear-gradient(315deg, #939 10%, rgba(255,62,18, 0) 80%),
-webkit-linear-gradient(225deg, #0adbd8 10%, rgba(10, 219, 216, 0) 80%), -webkit-linear-gradient(135deg, #09f505 100%, rgba(9, 245, 5, 0) 70%);
background:linear-gradient(45deg, #e10522 0%, rgba(225, 5, 34, 0) 70%), linear-gradient(315deg, #939 10%, rgba(255,62,18, 0) 80%),
linear-gradient(225deg, #0adbd8 10%, rgba(10, 219, 216, 0) 80%), linear-gradient(135deg, #09f505 100%, rgba(9, 245, 5, 0) 70%);
}
.absolute-center, .menu, .menu .btn .fa, .menu .btn-trigger .line{
position:absolute;
top:50%;
left:50%;
/* 指定对象在X、Y轴上的平移 */
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.menu{
width:5em;
height:5em;
}
.menu .btn{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background: rgba(255, 255, 255, 0.15);
opacity:0;
cursor:pointer;
-webkit-transition: opacity 1s, z-index 0.3s, -webkit-transform 1s;
transition:opacity 1s, z-index 0.3s, -webkit-transform 1s;
transition:opacity 1s, z-index 0.3s, tra