今天学习了一个css实现弹性菜单的效果，感觉还不错。
闲话不说，直接上代码....
下面是页面的HTML代码：
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>
其中使用了font-awesome，在head里面添加
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'>
就可以显示出图标。
进入正题，下面是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, transform 1s; transition:opacity 1s, z-index 0.3s, transform 1s, -webkit-transform 1s; -webkit-transform: translateX(0); transform:translateX(0); } .menu .btn .fa{ font-size:3em; -webkit-transition: color 0.3s; transition: color 0.3s; } .menu .btn:hover .fa{ color: rgba(255, 255, 255, 0.7); } .menu .btn.btn-trigger{ opacity:1; z-index:100; cursor: pointer; -webkit-transition: -webkit-transform 0.3s; transition:-webkit-transform 0.3s; transition: transform 0.3s; } .menu .btn.btn-trigger:hover{ -webkit-transform: scale(1.2); transform: scale(1.2); } .menu .btn-trigger:hover .line { background-color: rgba(255, 255, 255, 0.7); } .menu .btn-trigger:hover .line:before, .menu .btn-trigger:hover .line:after { background-color: rgba(255, 255, 255, 0.7); } .menu .btn-trigger .line{ height:6px; width:60%; background: #000; border-radius: 6px; -webkit-transition: background-color 0.3s, height 0.3s, top 0.3s; transition: background-color 0.3s, height 0.3s, top 0.3s; } .menu .btn-trigger .line:before, .menu .btn-trigger .line:after { content: ""; display: block; position: absolute; left: 0; width: 100%; height: 6px; background: #000; border-radius: 6px; -webkit-transition: background-color 0.3s, -webkit-transform 0.3s; transition: background-color 0.3s, -webkit-transform 0.3s; transition: background-color 0.3s, transform 0.3s; transition: background-color 0.3s, transform 0.3s, -webkit-transform 0.3s; } .menu .btn-trigger .line:before { top: -12px; -webkit-transform-origin: 15% 100%; transform-origin: 15% 100%; } .menu .btn-trigger .line:after { top: 12px; -webkit-transform-origin: 25% 30%; transform-origin: 25% 30%; } .menu .rotater{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .menu.active .btn-icon{ opacity:1; z-index:50; } .menu.active .btn-trigger .line{ height:0; top:45%; } .menu.active .btn-trigger .line:before{ -webkit-transform: rotate(45deg); transform: rotate(45deg); width:110%; } .menu.active .btn-trigger .line:after{ -webkit-transform: rotate(-45deg); transform: rotate(-45deg); width:110%; } /* 为每一个菜单添加旋转和平移效果 */ .rotater:nth-child(1){ -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .menu.active .rotater:nth-child(1) .btn-icon{ -webkit-transform: translateY(-10em) rotate(45deg); transform: translateY(-10em) rotate(45deg); } .rotater:nth-child(2){ -webkit-transform: rotate(0deg); transform: rotate(0deg); } .menu.active .rotater:nth-child(2) .btn-icon{ -webkit-transform: translateY(-10em); transform: translateY(-10em); } .rotater:nth-child(3){ -webkit-transform: rotate(45deg); transform: rotate(45deg); } .menu.active .rotater:nth-child(3) .btn-icon{ -webkit-transform: translateY(-10em) rotate(-45deg); transform: translateY(-10em) rotate(-45deg); } .rotater:nth-child(4){ -webkit-transform: rotate(90deg); transform: rotate(90deg); } .menu.active .rotater:nth-child(4) .btn-icon{ -webkit-transform: translateY(-10em) rotate(-90deg); transform: translateY(-10em) rotate(-90deg); } .rotater:nth-child(5){ -webkit-transform: rotate(135deg); transform: rotate(135deg); } .menu.active .rotater:nth-child(5) .btn-icon{ -webkit-transform: translateY(-10em) rotate(-135deg); transform: translateY(-10em) rotate(-135deg); } .rotater:nth-child(6){ -webkit-transform: rotate(180deg); transform: rotate(180deg); } .menu.active .rotater:nth-child(6) .btn-icon{ -webkit-transform: translateY(-10em) rotate(-180deg); transform: translateY(-10em) rotate(-180deg); } .rotater:nth-child(7){ -webkit-transform: rotate(225deg); transform: rotate(225deg); } .menu.active .rotater:nth-child(7) .btn-icon{ -webkit-transform: translateY(-10em) rotate(-225deg); transform: translateY(-10em) rotate(-225deg); } .rotater:nth-child(8){ -webkit-transform: rotate(270deg); transform: rotate(270deg); } .menu.active .rotater:nth-child(8) .btn-icon{ -webkit-transform: translateY(-10em) rotate(-270deg); transform: translateY(-10em) rotate(-270deg); }
1 body{ 2 /* 渐变三个参数：1.方向 2.起点颜色 3.终点颜色 */ 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%), 4 -webkit-linear-gradient(225deg, #0adbd8 10%, rgba(10, 219, 216, 0) 80%), -webkit-linear-gradient(135deg, #09f505 100%, rgba(9, 245, 5, 0) 70%); 5 background:linear-gradient(45deg, #e10522 0%, rgba(225, 5, 34, 0) 70%), linear-gradient(315deg, #939 10%, rgba(255,62,18, 0) 80%), 6 linear-gradient(225deg, #0adbd8 10%, rgba(10, 219, 216, 0) 80%), linear-gradient(135deg, #09f505 100%, rgba(9, 245, 5, 0) 70%); 7 } 8 .absolute-center, .menu, .menu .btn .fa, .menu .btn-trigger .line{ 9 position:absolute; 10 top:50%; 11 left:50%; 12 /* 指定对象在X、Y轴上的平移 */ 13 -webkit-transform: translateX(-50%) translateY(-50%); 14 transform: translateX(-50%) translateY(-50%); 15 } 16 .menu{ 17 5em; 18 height:5em; 19 } 20 .menu .btn{ 21 position: absolute; 22 top: 0; 23 left: 0; 24 100%; 25 height: 100%; 26 border-radius: 50%; 27 background: rgba(255, 255, 255, 0.15); 28 opacity:0; 29 cursor:pointer; 30 -webkit-transition: opacity 1s, z-index 0.3s, -webkit-transform 1s; 31 transition:opacity 1s, z-index 0.3s, -webkit-transform 1s; 32 transition:opacity 1s, z-index 0.3s, transform 1s; 33 transition:opacity 1s, z-index 0.3s, transform 1s, -webkit-transform 1s; 34 -webkit-transform: translateX(0); 35 transform:translateX(0); 36 } 37 .menu .btn .fa{ 38 font-size:3em; 39 -webkit-transition: color 0.3s; 40 transition: color 0.3s; 41 } 42 .menu .btn:hover .fa{ 43 color: rgba(255, 255, 255, 0.7); 44 } 45 .menu .btn.btn-trigger{ 46 opacity:1; 47 z-index:100; 48 cursor: pointer; 49 -webkit-transition: -webkit-transform 0.3s; 50 transition:-webkit-transform 0.3s; 51 transition: transform 0.3s; 52 } 53 .menu .btn.btn-trigger:hover{ 54 -webkit-transform: scale(1.2); 55 transform: scale(1.2); 56 } 57 .menu .btn-trigger:hover .line { 58 background-color: rgba(255, 255, 255, 0.7); 59 } 60 .menu .btn-trigger:hover .line:before, .menu .btn-trigger:hover .line:after { 61 background-color: rgba(255, 255, 255, 0.7); 62 } 63 .menu .btn-trigger .line{ 64 height:6px; 65 60%; 66 background: #000; 67 border-radius: 6px; 68 -webkit-transition: background-color 0.3s, height 0.3s, top 0.3s; 69 transition: background-color 0.3s, height 0.3s, top 0.3s; 70 } 71 .menu .btn-trigger .line:before, .menu .btn-trigger .line:after { 72 content: ""; 73 display: block; 74 position: absolute; 75 left: 0; 76 100%; 77 height: 6px; 78 background: #000; 79 border-radius: 6px; 80 -webkit-transition: background-color 0.3s, -webkit-transform 0.3s; 81 transition: background-color 0.3s, -webkit-transform 0.3s; 82 transition: background-color 0.3s, transform 0.3s; 83 transition: background-color 0.3s, transform 0.3s, -webkit-transform 0.3s; 84 } 85 .menu .btn-trigger .line:before { 86 top: -12px; 87 -webkit-transform-origin: 15% 100%; 88 transform-origin: 15% 100%; 89 } 90 .menu .btn-trigger .line:after { 91 top: 12px; 92 -webkit-transform-origin: 25% 30%; 93 transform-origin: 25% 30%; 94 } 95 .menu .rotater{ 96 position: absolute; 97 top: 0; 98 left: 0; 99 100%; 100 height: 100%; 101 } 102 .menu.active .btn-icon{ 103 opacity:1; 104 z-index:50; 105 } 106 .menu.active .btn-trigger .line{ 107 height:0; 108 top:45%; 109 } 110 .menu.active .btn-trigger .line:before{ 111 -webkit-transform: rotate(45deg); 112 transform: rotate(45deg); 113 110%; 114 } 115 .menu.active .btn-trigger .line:after{ 116 -webkit-transform: rotate(-45deg); 117 transform: rotate(-45deg); 118 110%; 119 } 120 /* 为每一个菜单添加旋转和平移效果 */ 121 .rotater:nth-child(1){ 122 -webkit-transform: rotate(-45deg); 123 transform: rotate(-45deg); 124 } 125 .menu.active .rotater:nth-child(1) .btn-icon{ 126 -webkit-transform: translateY(-10em) rotate(45deg); 127 transform: translateY(-10em) rotate(45deg); 128 } 129 .rotater:nth-child(2){ 130 -webkit-transform: rotate(0deg); 131 transform: rotate(0deg); 132 } 133 .menu.active .rotater:nth-child(2) .btn-icon{ 134 -webkit-transform: translateY(-10em); 135 transform: translateY(-10em); 136 } 137 .rotater:nth-child(3){ 138 -webkit-transform: rotate(45deg); 139 transform: rotate(45deg); 140 } 141 .menu.active .rotater:nth-child(3) .btn-icon{ 142 -webkit-transform: translateY(-10em) rotate(-45deg); 143 transform: translateY(-10em) rotate(-45deg); 144 } 145 .rotater:nth-child(4){ 146 -webkit-transform: rotate(90deg); 147 transform: rotate(90deg); 148 } 149 .menu.active .rotater:nth-child(4) .btn-icon{ 150 -webkit-transform: translateY(-10em) rotate(-90deg); 151 transform: translateY(-10em) rotate(-90deg); 152 } 153 .rotater:nth-child(5){ 154 -webkit-transform: rotate(135deg); 155 transform: rotate(135deg); 156 } 157 .menu.active .rotater:nth-child(5) .btn-icon{ 158 -webkit-transform: translateY(-10em) rotate(-135deg); 159 transform: translateY(-10em) rotate(-135deg); 160 } 161 .rotater:nth-child(6){ 162 -webkit-transform: rotate(180deg); 163 transform: rotate(180deg); 164 } 165 .menu.active .rotater:nth-child(6) .btn-icon{ 166 -webkit-transform: translateY(-10em) rotate(-180deg); 167 transform: translateY(-10em) rotate(-180deg); 168 } 169 .rotater:nth-child(7){ 170 -webkit-transform: rotate(225deg); 171 transform: rotate(225deg); 172 } 173 .menu.active .rotater:nth-child(7) .btn-icon{ 174 -webkit-transform: translateY(-10em) rotate(-225deg); 175 transform: translateY(-10em) rotate(-225deg); 176 } 177 .rotater:nth-child(8){ 178 -webkit-transform: rotate(270deg); 179 transform: rotate(270deg); 180 } 181 .menu.active .rotater:nth-child(8) .btn-icon{ 182 -webkit-transform: translateY(-10em) rotate(-270deg); 183 transform: translateY(-10em) rotate(-270d
主要用到的css属性是transition和transform.
最后再添加一点js就可以实现效果。
<script> $('.btn-trigger').click(function() { $('.menu').toggleClass('active'); }); </script>