#e8e8e8
1.menu-item, 2.menu-open-button { 3 background: #EEEEEE; 4 border-radius: 100%; 5 width: 80px; 6 height: 80px; 7 margin-left: -40px; 8 position: absolute; 9 color: #FFFFFF; 10 text-align: center; 11 line-height: 80px; 12 -webkit-transform: translate3d(0, 0, 0); 13 transform: translate3d(0, 0, 0); 14 -webkit-transition: -webkit-transform ease-out 200ms; 15 transition: -webkit-transform ease-out 200ms; 16 transition: transform ease-out 200ms; 17} 18 19.menu-open { 20 display: none; 21} 22 23.lines { 24 width: 25px; 25 height: 3px; 26 background: #596778; 27 display: block; 28 position: absolute; 29 top: 50%; 30 left: 50%; 31 margin-left: -12.5px; 32 margin-top: -1.5px; 33 -webkit-transition: -webkit-transform 200ms; 34 transition: -webkit-transform 200ms; 35 transition: transform 200ms; 36} 37 38.line-1 { 39 -webkit-transform: translate3d(0, -8px, 0); 40 transform: translate3d(0, -8px, 0); 41} 42 43.line-2 { 44 -webkit-transform: translate3d(0, 0, 0); 45 transform: translate3d(0, 0, 0); 46} 47 48.line-3 { 49 -webkit-transform: translate3d(0, 8px, 0); 50 transform: translate3d(0, 8px, 0); 51} 52 53.menu-open:checked + .menu-open-button .line-1 { 54 -webkit-transform: translate3d(0, 0, 0) rotate(45deg); 55 transform: translate3d(0, 0, 0) rotate(45deg); 56} 57 58.menu-open:checked + .menu-open-button .line-2 { 59 -webkit-transform: translate3d(0, 0, 0) scale(0.1, 1); 60 transform: translate3d(0, 0, 0) scale(0.1, 1); 61} 62 63.menu-open:checked + .menu-open-button .line-3 { 64 -webkit-transform: translate3d(0, 0, 0) rotate(-45deg); 65 transform: translate3d(0, 0, 0) rotate(-45deg); 66} 67 68.menu { 69 margin: auto; 70 position: absolute; 71 top: 0; 72 bottom: 0; 73 left: 0; 74 right: 0; 75 width: 80px; 76 height: 80px; 77 text-align: center; 78 box-sizing: border-box; 79 font-size: 26px; 80} 81 82 83/* .menu-item { 84 transition: all 0.1s ease 0s; 85} */ 86 87.menu-item:hover { 88 background: #EEEEEE; 89 color: #3290B1; 90} 91 92.menu-item:nth-child(3) { 93 -webkit-transition-duration: 180ms; 94 transition-duration: 180ms; 95} 96 97.menu-item:nth-child(4) { 98 -webkit-transition-duration: 180ms; 99 transition-duration: 180ms; 100} 101 102.menu-item:nth-child(5) { 103 -webkit-transition-duration: 180ms; 104 transition-duration: 180ms; 105} 106 107.menu-item:nth-child(6) { 108 -webkit-transition-duration: 180ms; 109 transition-duration: 180ms; 110} 111 112.menu-item:nth-child(7) { 113 -webkit-transition-duration: 180ms; 114 transition-duration: 180ms; 115} 116 117.menu-item:nth-child(8) { 118 -webkit-transition-duration: 180ms; 119 transition-duration: 180ms; 120} 121 122.menu-item:nth-child(9) { 123 -webkit-transition-duration: 180ms; 124 transition-duration: 180ms; 125} 126 127.menu-open-button { 128 z-index: 2; 129 -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); 130 transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); 131 -webkit-transition-duration: 400ms; 132 transition-duration: 400ms; 133 -webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0); 134 transform: scale(1.1, 1.1) translate3d(0, 0, 0); 135 cursor: pointer; 136 box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14); 137} 138 139.menu-open-button:hover { 140 -webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0); 141 transform: scale(1.2, 1.2) translate3d(0, 0, 0); 142} 143 144.menu-open:checked + .menu-open-button { 145 -webkit-transition-timing-function: linear; 146 transition-timing-function: linear; 147 -webkit-transition-duration: 200ms; 148 transition-duration: 200ms; 149 -webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0); 150 transform: scale(0.8, 0.8) translate3d(0, 0, 0); 151} 152 153.menu-open:checked ~ .menu-item { 154 -webkit-transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33); 155 transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33); 156} 157 158.menu-open:checked ~ .menu-item:nth-child(3) { 159 transition-duration: 180ms; 160 -webkit-transition-duration: 180ms; 161 -webkit-transform: translate3d(0.08361px, -104.99997px, 0); 162 transform: translate3d(0.08361px, -104.99997px, 0); 163} 164 165.menu-open:checked ~ .menu-item:nth-child(4) { 166 transition-duration: 280ms; 167 -webkit-transition-duration: 280ms; 168 -webkit-transform: translate3d(90.9466px, -52.47586px, 0); 169 transform: translate3d(90.9466px, -52.47586px, 0); 170} 171 172.menu-open:checked ~ .menu-item:nth-child(5) { 173 transition-duration: 380ms; 174 -webkit-transition-duration: 380ms; 175 -webkit-transform: translate3d(90.9466px, 52.47586px, 0); 176 transform: translate3d(90.9466px, 52.47586px, 0); 177} 178 179.menu-open:checked ~ .menu-item:nth-child(6) { 180 transition-duration: 480ms; 181 -webkit-transition-duration: 480ms; 182 -webkit-transform: translate3d(0.08361px, 104.99997px, 0); 183 transform: translate3d(0.08361px, 104.99997px, 0); 184} 185 186.menu-open:checked ~ .menu-item:nth-child(7) { 187 transition-duration: 580ms; 188 -webkit-transition-duration: 580ms; 189 -webkit-transform: translate3d(-90.86291px, 52.62064px, 0); 190 transform: translate3d(-90.86291px, 52.62064px, 0); 191} 192 193.menu-open:checked ~ .menu-item:nth-child(8) { 194 transition-duration: 680ms; 195 -webkit-transition-duration: 680ms; 196 -webkit-transform: translate3d(-91.03006px, -52.33095px, 0); 197 transform: translate3d(-91.03006px, -52.33095px, 0); 198} 199 200.menu-open:checked ~ .menu-item:nth-child(9) { 201 transition-duration: 780ms; 202 -webkit-transition-duration: 780ms; 203 -webkit-transform: translate3d(-0.25084px, -104.9997px, 0); 204 transform: translate3d(-0.25084px, -104.9997px, 0); 205} 206 207.blue { 208 background-color: #669AE1; 209 box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14); 210 text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12); 211} 212 213.blue:hover { 214 color: #669AE1; 215 text-shadow: none; 216} 217 218.green { 219 background-color: #70CC72; 220 box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14); 221 text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12); 222} 223 224.green:hover { 225 color: #70CC72; 226 text-shadow: none; 227} 228 229.red { 230 background-color: #FE4365; 231 box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14); 232 text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12); 233} 234 235.red:hover { 236 color: #FE4365; 237 text-shadow: none; 238} 239 240.purple { 241 background-color: #C49CDE; 242 box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14); 243 text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12); 244} 245 246.purple:hover { 247 color: #C49CDE; 248 text-shadow: none; 249} 250 251.orange { 252 background-color: #FC913A; 253 box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14); 254 text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12); 255} 256 257.orange:hover { 258 color: #FC913A; 259 text-shadow: none; 260} 261 262.lightblue { 263 background-color: #62C2E4; 264 box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14); 265 text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12); 266} 267 268.lightblue:hover { 269 color: #62C2E4; 270 text-shadow: none; 271} 272 273.credit { 274 margin: 24px 20px 120px 0; 275 text-align: right; 276 color: #EEEEEE; 277} 278 279.credit a { 280 padding: 8px 0; 281 color: #C49CDE; 282 text-decoration: none; 283 transition: all 0.3s ease 0s; 284} 285 286.credit a:hover { 287 text-decoration: underline; 288}
4.7K views
4.7K views
Comments
MIT License