记录几个好看的模态弹窗
先写上一段js代码：
1 var overlay = document.querySelector( '.md-overlay' ); 2 3 [].slice.call( document.querySelectorAll( '.md-trigger' ) ).forEach( function( el, i ) { 4 5 var modal = document.querySelector( '#' + el.getAttribute( 'data-modal' ) ), 6 close = modal.querySelector( '.md-close' ); 7 8 function removeModal( hasPerspective ) { 9 classie.remove( modal, 'md-show' ); 10 11 if( hasPerspective ) { 12 classie.remove( document.documentElement, 'md-perspective' ); 13 } 14 } 15 16 function removeModalHandler() { 17 removeModal( classie.has( el, 'md-setperspective' ) ); 18 } 19 20 el.addEventListener( 'click', function( ev ) { 21 classie.add( modal, 'md-show' ); 22 overlay.removeEventListener( 'click', removeModalHandler ); 23 overlay.addEventListener( 'click', removeModalHandler ); 24 25 if( classie.has( el, 'md-setperspective' ) ) { 26 setTimeout( function() { 27 classie.add( document.documentElement, 'md-perspective' ); 28 }, 25 ); 29 } 30 }); 31 32 close.addEventListener( 'click', function( ev ) { 33 ev.stopPropagation(); 34 removeModalHandler(); 35 }); 36 37 } ); 38 39 40 41 42 function classReg( className ) { 43 return new RegExp("(^|\\s+)" + className + "(\\s+|$)"); 44 } 45 46 // classList support for class management 47 // altho to be fair, the api sucks because it won't accept multiple classes at once 48 var hasClass, addClass, removeClass; 49 50 if ( 'classList' in document.documentElement ) { 51 hasClass = function( elem, c ) { 52 return elem.classList.contains( c ); 53 }; 54 addClass = function( elem, c ) { 55 elem.classList.add( c ); 56 }; 57 removeClass = function( elem, c ) { 58 elem.classList.remove( c ); 59 }; 60 } 61 else { 62 hasClass = function( elem, c ) { 63 return classReg( c ).test( elem.className ); 64 }; 65 addClass = function( elem, c ) { 66 if ( !hasClass( elem, c ) ) { 67 elem.className = elem.className + ' ' + c; 68 } 69 }; 70 removeClass = function( elem, c ) { 71 elem.className = elem.className.replace( classReg( c ), ' ' ); 72 }; 73 } 74 75 function toggleClass( elem, c ) { 76 var fn = hasClass( elem, c ) ? removeClass : addClass; 77 fn( elem, c ); 78 } 79 80 var classie = { 81 // full names 82 hasClass: hasClass, 83 addClass: addClass, 84 removeClass: removeClass, 85 toggleClass: toggleClass, 86 // short names 87 has: hasClass, 88 add: addClass, 89 remove: removeClass, 90 toggle: toggleClass 91 }; 92 93 // transport 94 if ( typeof define === 'function' && define.amd ) { 95 // AMD 96 define( classie ); 97 } else { 98 // browser global 99 window.classie = classie; 100 }
html的格式：
1 <button class="md-trigger" data-modal="modal-1">Fade in & Scale</button><--按钮部分--> 2 3 <div class="md-modal md-effect-1" id="modal-1"><--显示弹窗部分--> 4 <div class="md-content"> 5 <h3>Modal Dialog</h3> 6 <div> 7 <p>This is a modal window. You can do the following things with it:</p> 8 <ul> 9 <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li> 10 <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li> 11 <li><strong>Close:</strong> click on the button below to close the modal.</li> 12 </ul> 13 <button class="md-close">Close me!</button> 14 </div> 15 </div> 16 </div>
css代码：（大家共有部分）
1 .md-modal { 2 position: fixed; 3 top: 50%; 4 left: 50%; 5 width: 50%; 6 max-width: 630px; 7 min-width: 320px; 8 height: auto; 9 z-index: 2000; 10 visibility: hidden; 11 -webkit-backface-visibility: hidden; 12 -moz-backface-visibility: hidden; 13 backface-visibility: hidden; 14 -webkit-transform: translateX(-50%) translateY(-50%); 15 -moz-transform: translateX(-50%) translateY(-50%); 16 -ms-transform: translateX(-50%) translateY(-50%); 17 transform: translateX(-50%) translateY(-50%); 18 } 19 20 .md-show { 21 visibility: visible; 22 } 23 24 .md-overlay { 25 position: fixed; 26 width: 100%; 27 height: 100%; 28 visibility: hidden; 29 top: 0; 30 left: 0; 31 z-index: 1000; 32 opacity: 0; 33 background: rgba(143,27,15,0.8); 34 -webkit-transition: all 0.3s; 35 -moz-transition: all 0.3s; 36 transition: all 0.3s; 37 } 38 39 .md-show .md-overlay { 40 opacity: 1; 41 visibility: visible; 42 } 43 44 /* Content styles */ 45 .md-content { 46 color: #fff; 47 background: #e74c3c; 48 position: relative; 49 border-radius: 3px; 50 margin: 0 auto; 51 } 52 53 .md-content h3 { 54 margin: 0; 55 padding: 0.4em; 56 text-align: center; 57 font-size: 2.4em; 58 font-weight: 300; 59 opacity: 0.8; 60 background: rgba(0,0,0,0.1); 61 border-radius: 3px 3px 0 0; 62 } 63 64 .md-content > div { 65 padding: 15px 40px 30px; 66 margin: 0; 67 font-weight: 300; 68 font-size: 1.15em; 69 } 70 71 .md-content > div p { 72 margin: 0; 73 padding: 10px 0; 74 } 75 76 .md-content > div ul { 77 margin: 0; 78 padding: 0 0 30px 20px; 79 } 80 81 .md-content > div ul li { 82 padding: 5px 0; 83 } 84 85 .md-content button { 86 display: block; 87 margin: 0 auto; 88 font-size: 0.8em; 89 }
下面是私有部分：（淡入淡出为例子）
1 .md-effect-1 .md-content { 2 -webkit-transform: scale(0.5); 3 -moz-transform: scale(0.5); 4 -ms-transform: scale(0.5); 5 transform: scale(0.5); 6 opacity: 0; 7 -webkit-transition: all 0.3s; 8 -moz-transition: all 0.3s; 9 transition: all 0.3s; 10 } 11 12 .md-show.md-effect-1 .md-content { 13 -webkit-transform: scale(1); 14 -moz-transform: scale(1); 15 -ms-transform: scale(1); 16 transform: scale(1); 17 opacity: 1; 18 }
还有其他的特效：
1 /* General styles for the modal */ 2 3 /* 4 Styles for the html/body for special modal where we want 3d effects 5 Note that we need a container wrapping all content on the page for the 6 perspective effects (not including the modals and the overlay). 7 */ 8 .md-perspective, 9 .md-perspective body { 10 height: 100%; 11 overflow: hidden; 12 } 13 14 .md-perspective body { 15 background: #222; 16 -webkit-perspective: 600px; 17 -moz-perspective: 600px; 18 perspective: 600px; 19 } 20 21 .container { 22 background: #e74c3c; 23 min-height: 100%; 24 } 25 26 .md-modal { 27 position: fixed; 28 top: 50%; 29 left: 50%; 30 width: 50%; 31 max-width: 630px; 32 min-width: 320px; 33 height: auto; 34 z-index: 2000; 35 visibility: hidden; 36 -webkit-backface-visibility: hidden; 37 -moz-backface-visibility: hidden; 38 backface-visibility: hidden; 39 -webkit-transform: translateX(-50%) translateY(-50%); 40 -moz-transform: translateX(-50%) translateY(-50%); 41 -ms-transform: translateX(-50%) translateY(-50%); 42 transform: translateX(-50%) translateY(-50%); 43 } 44 45 .md-show { 46 visibility: visible; 47 } 48 49 .md-overlay { 50 position: fixed; 51 width: 100%; 52 height: 100%; 53 visibility: hidden; 54 top: 0; 55 left: 0; 56 z-index: 1000; 57 opacity: 0; 58 background: rgba(143,27,15,0.8); 59 -webkit-transition: all 0.3s; 60 -moz-transition: all 0.3s; 61 transition: all 0.3s; 62 } 63 64 .md-show ~ .md-overlay { 65 opacity: 1; 66 visibility: visible; 67 } 68 69 /* Content styles */ 70 .md-content { 71 color: #fff; 72 background: #e74c3c; 73 position: relative; 74 border-radius: 3px; 75 margin: 0 auto; 76 } 77 78 .md-content h3 { 79 margin: 0; 80 padding: 0.4em; 81 text-align: center; 82 font-size: 2.4em; 83 font-weight: 300; 84 opacity: 0.8; 85 background: rgba(0,0,0,0.1); 86 border-radius: 3px 3px 0 0; 87 } 88 89 .md-content > div { 90 padding: 15px 40px 30px; 91 margin: 0; 92 font-weight: 300; 93 font-size: 1.15em; 94 } 95 96 .md-content > div p { 97 margin: 0; 98 padding: 10px 0; 99 } 100 101 .md-content > div ul { 102 margin: 0; 103 padding: 0 0 30px 20px; 104 } 105 106 .md-content > div ul li { 107 padding: 5px 0; 108 } 109 110 .md-content button { 111 display: block; 112 margin: 0 auto; 113 font-size: 0.8em; 114 } 115 116 /* Individual modal styles with animations/transitions */ 117 118 /* Effect 1: Fade in and scale up */ 119 .md-effect-1 .md-content { 120 -webkit-transform: scale(0.7); 121 -moz-transform: scale(0.7); 122 -ms-transform: scale(0.7); 123 transform: scale(0.7); 124 opacity: 0; 125 -webkit-transition: all 0.3s; 126 -moz-transition: all 0.3s; 127 transition: all 0.3s; 128 } 129 130 .md-show.md-effect-1 .md-content { 131 -webkit-transform: scale(1); 132 -moz-transform: scale(1); 133 -ms-transform: scale(1); 134 transform: scale(1); 135 opacity: 1; 136 } 137 138 /* Effect 2: Slide from the right */ 139 .md-effect-2 .md-content { 140 -webkit-transform: translateX(20%); 141 -moz-transform: translateX(20%); 142 -ms-transform: translateX(20%); 143 transform: translateX(20%); 144 opacity: 0; 145 -webkit-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9); 146 -moz-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9); 147 transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9); 148 } 149 150 .md-show.md-effect-2 .md-content { 151 -webkit-transform: translateX(0); 152 -moz-transform: translateX(0); 153 -ms-transform: translateX(0); 154 transform: translateX(0); 155 opacity: 1; 156 } 157 158 /* Effect 3: Slide from the bottom */ 159 .md-effect-3 .md-content { 160 -webkit-transform: translateY(20%); 161 -moz-transform: translateY(20%); 162 -ms-transform: translateY(20%); 163 transform: translateY(20%); 164 opacity: 0; 165 -webkit-transition: all 0.3s; 166 -moz-transition: all 0.3s; 167 transition: all 0.3s; 168 } 169 170 .md-show.md-effect-3 .md-content { 171 -webkit-transform: translateY(0); 172 -moz-transform: translateY(0); 173 -ms-transform: translateY(0); 174 transform: translateY(0); 175 opacity: 1; 176 } 177 178 /* Effect 4: Newspaper */ 179 .md-effect-4 .md-content { 180 -webkit-transform: scale(0) rotate(720deg); 181 -moz-transform: scale(0) rotate(720deg); 182 -ms-transform: scale(0) rotate(720deg); 183 transform: scale(0) rotate(720deg); 184 opacity: 0; 185 } 186 187 .md-show.md-effect-4 ~ .md-overlay, 188 .md-effect-4 .md-content { 189 -webkit-transition: all 0.5s; 190 -moz-transition: all 0.5s; 191 transition: all 0.5s; 192 } 193 194 .md-show.md-effect-4 .md-content { 195 -webkit-transform: scale(1) rotate(0deg); 196 -moz-transform: scale(1) rotate(0deg); 197 -ms-transform: scale(1) rotate(0deg); 198 transform: scale(1) rotate(0deg); 199 opacity: 1; 200 } 201 202 /* Effect 5: fall */ 203 .md-effect-5.md-modal { 204 -webkit-perspective: 1300px; 205 -moz-perspective: 1300px; 206 perspective: 1300px; 207 } 208 209 .md-effect-5 .md-content { 210 -webkit-transform-style: preserve-3d; 211 -moz-transform-style: preserve-3d; 212 transform-style: preserve-3d; 213 -webkit-transform: translateZ(600px) rotateX(20deg); 214 -moz-transform: translateZ(600px) rotateX(20deg); 215 -ms-transform: translateZ(600px) rotateX(20deg); 216 transform: translateZ(600px) rotateX(20deg); 217 opacity: 0; 218 } 219 220 .md-show.md-effect-5 .md-content { 221 -webkit-transition: all 0.3s ease-in; 222 -moz-transition: all 0.3s ease-in; 223 transition: all 0.3s ease-in; 224 -webkit-transform: translateZ(0px) rotateX(0deg); 225 -moz-transform: translateZ(0px) rotateX(0deg); 226 -ms-transform: translateZ(0px) rotateX(0deg); 227 transform: translateZ(0px) rotateX(0deg); 228 opacity: 1; 229 } 230 231 /* Effect 6: side fall */ 232 .md-effect-6.md-modal { 233 -webkit-perspective: 1300px; 234 -moz-perspective: 1300px; 235 perspective: 1300px; 236 } 237 238 .md-effect-6 .md-content { 239 -webkit-transform-style: preserve-3d; 240 -moz-transform-style: preserve-3d; 241 transform-style: preserve-3d; 242 -webkit-transform: translate(30%) translateZ(600px) rotate(10deg); 243 -moz-transform: translate(30%) translateZ(600px) rotate(10deg); 244 -ms-transform: translate(30%) translateZ(600px) rotate(10deg); 245 transform: translate(30%) translateZ(600px) rotate(10deg); 246 opacity: 0; 247 } 248 249 .md-show.md-effect-6 .md-content { 250 -webkit-transition: all 0.3s ease-in; 251 -moz-transition: all 0.3s ease-in; 252 transition: all 0.3s ease-in; 253 -webkit-transform: translate(0%) translateZ(0) rotate(0deg); 254 -moz-transform: translate(0%) translateZ(0) rotate(0deg); 255 -ms-transform: translate(0%) translateZ(0) rotate(0deg); 256 transform: translate(0%) translateZ(0) rotate(0deg); 257 opacity: 1; 258 } 259 260 /* Effect 7: slide and stick to top */ 261 .md-effect-7{ 262 top: 0; 263 -webkit-transform: translateX(-50%); 264 -moz-transform: translateX(-50%); 265 -ms-transform: translateX(-50%); 266 transform: translateX(-50%); 267 } 268 269 .md-effect-7 .md-content { 270 -webkit-transform: translateY(-200%); 271 -moz-transform: translateY(-200%); 272 -ms-transform: translateY(-200%); 273 transform: translateY(-200%); 274 -webkit-transition: all .3s; 275 -moz-transition: all .3s; 276 transition: all .3s; 277 opacity: 0; 278 } 279 280 .md-show.md-effect-7 .md-content { 281 -webkit-transform: translateY(0%); 282 -moz-transform: translateY(0%); 283 -ms-transform: translateY(0%); 284 transform: translateY(0%); 285 border-radius: 0 0 3px 3px; 286 opacity: 1; 287 } 288 289 /* Effect 8: 3D flip horizontal */ 290 .md-effect-8.md-modal { 291 -webkit-perspective: 1300px; 292 -moz-perspective: 1300px; 293 perspective: 1300px; 294 } 295 296 .md-effect-8 .md-content { 297 -webkit-transform-style: preserve-3d; 298 -moz-transform-style: preserve-3d; 299 transform-style: preserve-3d; 300 -webkit-transform: rotateY(-70deg); 301 -moz-transform: rotateY(-70deg); 302 -ms-transform: rotateY(-70deg); 303 transform: rotateY(-70deg); 304 -webkit-transition: all 0.3s; 305 -moz-transition: all 0.3s; 306 transition: all 0.3s; 307 opacity: 0; 308 } 309 310 .md-show.md-effect-8 .md-content { 311 -webkit-transform: rotateY(0deg); 312 -moz-transform: rotateY(0deg); 313 -ms-transform: rotateY(0deg); 314 transform: rotateY(0deg); 315 opacity: 1; 316 } 317 318 /* Effect 9: 3D flip vertical */ 319 .md-effect-9.md-modal { 320 -webkit-perspective: 1300px; 321 -moz-perspective: 1300px; 322 perspective: 1300px; 323 } 324 325 .md-effect-9 .md-content { 326 -webkit-transform-style: preserve-3d; 327 -moz-transform-style: preserve-3d; 328 transform-style: preserve-3d; 329 -webkit-transform: rotateX(-70deg); 330 -moz-transform: rotateX(-70deg); 331 -ms-transform: rotateX(-70deg); 332 transform: rotateX(-70deg); 333 -webkit-transition: all 0.3s; 334 -moz-transition: all 0.3s; 335 transition: all 0.3s; 336 opacity: 0; 337 } 338 339 .md-show.md-effect-9 .md-content { 340 -webkit-transform: rotateX(0deg); 341 -moz-transform: rotateX(0deg); 342 -ms-transform: rotateX(0deg); 343 transform: rotateX(0deg); 344 opacity: 1; 345 } 346 347 /* Effect 10: 3D sign */ 348 .md-effect-10.md-modal { 349 -webkit-perspective: 1300px; 350 -moz-perspective: 1300px; 351 perspective: 1300px; 352 } 353 354 .md-effect-10 .md-content { 355 -webkit-transform-style: preserve-3d; 356 -moz-transform-style: preserve-3d; 357 transform-style: preserve-3d; 358 -webkit-transform: rotateX(-60deg); 359 -moz-transform: rotateX(-60deg); 360 -ms-transform: rotateX(-60deg); 361 transform: rotateX(-60deg); 362 -webkit-transform-origin: 50% 0; 363 -moz-transform-origin: 50% 0; 364 transform-origin: 50% 0; 365 opacity: 0; 366 -webkit-transition: all 0.3s; 367 -moz-transition: all 0.3s; 368 transition: all 0.3s; 369 } 370 371 .md-show.md-effect-10 .md-content { 372 -webkit-transform: rotateX(0deg); 373 -moz-transform: rotateX(0deg); 374 -ms-transform: rotateX(0deg); 375 transform: rotateX(0deg); 376 opacity: 1; 377 } 378 379 /* Effect 11: Super scaled */ 380 .md-effect-11 .md-content { 381 -webkit-transform: scale(2); 382 -moz-transform: scale(2); 383 -ms-transform: scale(2); 384 transform: scale(2); 385 opacity: 0; 386 -webkit-transition: all 0.3s; 387 -moz-transition: all 0.3s; 388 transition: all 0.3s; 389 } 390 391 .md-show.md-effect-11 .md-content { 392 -webkit-transform: scale(1); 393 -moz-transform: scale(1); 394 -ms-transform: scale(1); 395 transform: scale(1); 396 opacity: 1; 397 } 398 399 /* Effect 12: Just me */ 400 .md-effect-12 .md-content { 401 -webkit-transform: scale(0.8); 402 -moz-transform: scale(0.8); 403 -ms-transform: scale(0.8); 404 transform: scale(0.8); 405 opacity: 0; 406 -webkit-transition: all 0.3s; 407 -moz-transition: all 0.3s; 408 transition: all 0.3s; 409 } 410 411 .md-show.md-effect-12 ~ .md-overlay { 412 background: #e74c3c; 413 } 414 415 .md-effect-12 .md-content h3, 416 .md-effect-12 .md-content { 417 background: transparent; 418 } 419 420 .md-show.md-effect-12 .md-content { 421 -webkit-transform: scale(1); 422 -moz-transform: scale(1); 423 -ms-transform: scale(1); 424 transform: scale(1); 425 opacity: 1; 426 } 427 428 /* Effect 13: 3D slit */ 429 .md-effect-13.md-modal { 430 -webkit-perspective: 1300px; 431 -moz-perspective: 1300px; 432 perspective: 1300px; 433 } 434 435 .md-effect-13 .md-content { 436 -webkit-transform-style: preserve-3d; 437 -moz-transform-style: preserve-3d; 438 transform-style: preserve-3d; 439 -webkit-transform: translateZ(-3000px) rotateY(90deg); 440 -moz-transform: translateZ(-3000px) rotateY(90deg); 441 -ms-transform: translateZ(-3000px) rotateY(90deg); 442 transform: translateZ(-3000px) rotateY(90deg); 443 opacity: 0; 444 } 445 446 .md-show.md-effect-13 .md-content { 447 -webkit-animation: slit .7s forwards ease-out; 448 -moz-animation: slit .7s forwards ease-out; 449 animation: slit .7s forwards ease-out; 450 } 451 452 @-webkit-keyframes slit { 453 50% { -webkit-transform: translateZ(-250px) rotateY(89deg); opacity: .5; -webkit-animation-timing-function: ease-out;} 454 100% { -webkit-transform: translateZ(0) rotateY(0deg); opacity: 1; } 455 } 456 457 @-moz-keyframes slit { 458 50% { -moz-transform: translateZ(-250px) rotateY(89deg); opacity: .5; -moz-animation-timing-function: ease-out;} 459 100% { -moz-transform: translateZ(0) rotateY(0deg); opacity: 1; } 460 } 461 462 @keyframes slit { 463 50% { transform: translateZ(-250px) rotateY(89deg); opacity: 1; animation-timing-function: ease-in;} 464 100% { transform: translateZ(0) rotateY(0deg); opacity: 1; } 465 } 466 467 /* Effect 14: 3D Rotate from bottom */ 468 .md-effect-14.md-modal { 469 -webkit-perspective: 1300px; 470 -moz-perspective: 1300px; 471 perspective: 1300px; 472 } 473 474 .md-effect-14 .md-content { 475 -webkit-transform-style: preserve-3d; 476 -moz-transform-style: preserve-3d; 477 transform-style: preserve-3d; 478 -webkit-transform: translateY(100%) rotateX(90deg); 479 -moz-transform: translateY(100%) rotateX(90deg); 480 -ms-transform: translateY(100%) rotateX(90deg); 481 transform: translateY(100%) rotateX(90deg); 482 -webkit-transform-origin: 0 100%; 483 -moz-transform-origin: 0 100%; 484 transform-origin: 0 100%; 485 opacity: 0; 486 -webkit-transition: all 0.3s ease-out; 487 -moz-transition: all 0.3s ease-out; 488 transition: all 0.3s ease-out; 489 } 490 491 .md-show.md-effect-14 .md-content { 492 -webkit-transform: translateY(0%) rotateX(0deg); 493 -moz-transform: translateY(0%) rotateX(0deg); 494 -ms-transform: translateY(0%) rotateX(0deg); 495 transform: translateY(0%) rotateX(0deg); 496 opacity: 1; 497 } 498 499 /* Effect 15: 3D Rotate in from left */ 500 .md-effect-15.md-modal { 501 -webkit-perspective: 1300px; 502 -moz-perspective: 1300px; 503 perspective: 1300px; 504 } 505 506 .md-effect-15 .md-content { 507 -webkit-transform-style: preserve-3d; 508 -moz-transform-style: preserve-3d; 509 transform-style: preserve-3d; 510 -webkit-transform: translateZ(100px) translateX(-30%) rotateY(90deg); 511 -moz-transform: translateZ(100px) translateX(-30%) rotateY(90deg); 512 -ms-transform: translateZ(100px) translateX(-30%) rotateY(90deg); 513 transform: translateZ(100px) translateX(-30%) rotateY(90deg); 514 -webkit-transform-origin: 0 100%; 515 -moz-transform-origin: 0 100%; 516 transform-origin: 0 100%; 517 opacity: 0; 518 -webkit-transition: all 0.3s; 519 -moz-transition: all 0.3s; 520 transition: all 0.3s; 521 } 522 523 .md-show.md-effect-15 .md-content { 524 -webkit-transform: translateZ(0px) translateX(0%) rotateY(0deg); 525 -moz-transform: translateZ(0px) translateX(0%) rotateY(0deg); 526 -ms-transform: translateZ(0px) translateX(0%) rotateY(0deg); 527 transform: translateZ(0px) translateX(0%) rotateY(0deg); 528 opacity: 1; 529 } 530 531 /* Effect 16: Blur */ 532 .md-show.md-effect-16 ~ .md-overlay { 533 background: rgba(180,46,32,0.5); 534 } 535 536 .md-show.md-effect-16 ~ .container { 537 -webkit-filter: blur(3px); 538 -moz-filter: blur(3px); 539 filter: blur(3px); 540 } 541 542 .md-effect-16 .md-content { 543 -webkit-transform: translateY(-5%); 544 -moz-transform: translateY(-5%); 545 -ms-transform: translateY(-5%); 546 transform: translateY(-5%); 547 opacity: 0; 548 } 549 550 .md-show.md-effect-16 ~ .container, 551 .md-effect-16 .md-content { 552 -webkit-transition: all 0.3s; 553 -moz-transition: all 0.3s; 554 transition: all 0.3s; 555 } 556 557 .md-show.md-effect-16 .md-content { 558 -webkit-transform: translateY(0); 559 -moz-transform: translateY(0); 560 -ms-transform: translateY(0); 561 transform: translateY(0); 562 opacity: 1; 563 } 564 565 /* Effect 17: Slide in from bottom with perspective on container */ 566 .md-show.md-effect-17 ~ .container { 567 height: 100%; 568 overflow: hidden; 569 -webkit-transition: -webkit-transform 0.3s; 570 -moz-transition: -moz-transform 0.3s; 571 transition: transform 0.3s; 572 } 573 574 .md-show.md-effect-17 ~ .container, 575 .md-show.md-effect-17 ~ .md-overlay { 576 -webkit-transform: rotateX(-2deg); 577 -moz-transform: rotateX(-2deg); 578 -ms-transform: rotateX(-2deg); 579 transform: rotateX(-2deg); 580 -webkit-transform-origin: 50% 0%; 581 -moz-transform-origin: 50% 0%; 582 transform-origin: 50% 0%; 583 -webkit-transform-style: preserve-3d; 584 -moz-transform-style: preserve-3d; 585 transform-style: preserve-3d; 586 } 587 588 .md-effect-17 .md-content { 589 opacity: 0; 590 -webkit-transform: translateY(200%); 591 -moz-transform: translateY(200%); 592 -ms-transform: translateY(200%); 593 transform: translateY(200%); 594 } 595 596 .md-show.md-effect-17 .md-content { 597 -webkit-transform: translateY(0); 598 -moz-transform: translateY(0); 599 -ms-transform: translateY(0); 600 transform: translateY(0); 601 opacity: 1; 602 -webkit-transition: all 0.3s 0.2s; 603 -moz-transition: all 0.3s 0.2s; 604 transition: all 0.3s 0.2s; 605 } 606 607 /* Effect 18: Slide from right with perspective on container */ 608 .md-show.md-effect-18 ~ .container { 609 height: 100%; 610 overflow: hidden; 611 } 612 613 .md-show.md-effect-18 ~ .md-overlay { 614 background: rgba(143,27,15,0.8); 615 -webkit-transition: all 0.5s; 616 -moz-transition: all 0.5s; 617 transition: all 0.5s; 618 } 619 620 .md-show.md-effect-18 ~ .container, 621 .md-show.md-effect-18 ~ .md-overlay { 622 -webkit-transform-style: preserve-3d; 623 -webkit-transform-origin: 0% 50%; 624 -webkit-animation: rotateRightSideFirst 0.5s forwards ease-in; 625 -moz-transform-style: preserve-3d; 626 -moz-transform-origin: 0% 50%; 627 -moz-animation: rotateRightSideFirst 0.5s forwards ease-in; 628 transform-style: preserve-3d; 629 transform-origin: 0% 50%; 630 animation: rotateRightSideFirst 0.5s forwards ease-in; 631 } 632 633 @-webkit-keyframes rotateRightSideFirst { 634 50% { -webkit-transform: translateZ(-50px) rotateY(5deg); -webkit-animation-timing-function: ease-out; } 635 100% { -webkit-transform: translateZ(-200px); } 636 } 637 638 @-moz-keyframes rotateRightSideFirst { 639 50% { -moz-transform: translateZ(-50px) rotateY(5deg); -moz-animation-timing-function: ease-out; } 640 100% { -moz-transform: translateZ(-200px); } 641 } 642 643 @keyframes rotateRightSideFirst { 644 50% { transform: translateZ(-50px) rotateY(5deg); animation-timing-function: ease-out; } 645 100% { transform: translateZ(-200px); } 646 } 647 648 .md-effect-18 .md-content { 649 -webkit-transform: translateX(200%); 650 -moz-transform: translateX(200%); 651 -ms-transform: translateX(200%); 652 transform: translateX(200%); 653 opacity: 0; 654 } 655 656 .md-show.md-effect-18 .md-content { 657 -webkit-transform: translateX(0); 658 -moz-transform: translateX(0); 659 -ms-transform: translateX(0); 660 transform: translateX(0); 661 opacity: 1; 662 -webkit-transition: all 0.5s 0.1s; 663 -moz-transition: all 0.5s 0.1s; 664 transition: all 0.5s 0.1s; 665 } 666 667 /* Effect 19: Slip in from the top with perspective on container */ 668 .md-show.md-effect-19 ~ .container { 669 height: 100%; 670 overflow: hidden; 671 } 672 673 .md-show.md-effect-19 ~ .md-overlay { 674 -webkit-transition: all 0.5s; 675 -moz-transition: all 0.5s; 676 transition: all 0.5s; 677 } 678 679 .md-show.md-effect-19 ~ .container, 680 .md-show.md-effect-19 ~ .md-overlay { 681 -webkit-transform-style: preserve-3d; 682 -webkit-transform-origin: 50% 100%; 683 -webkit-animation: OpenTop 0.5s forwards ease-in; 684 -moz-transform-style: preserve-3d; 685 -moz-transform-origin: 50% 100%; 686 -moz-animation: OpenTop 0.5s forwards ease-in; 687 transform-style: preserve-3d; 688 transform-origin: 50% 100%; 689 animation: OpenTop 0.5s forwards ease-in; 690 } 691 692 @-webkit-keyframes OpenTop { 693 50% { 694 -webkit-transform: rotateX(10deg); 695 -webkit-animation-timing-function: ease-out; 696 } 697 } 698 699 @-moz-keyframes OpenTop { 700 50% { 701 -moz-transform: rotateX(10deg); 702 -moz-animation-timing-function: ease-out; 703 } 704 } 705 706 @keyframes OpenTop { 707 50% { 708 transform: rotateX(10deg); 709 animation-timing-function: ease-out; 710 } 711 } 712 713 .md-effect-19 .md-content { 714 -webkit-transform: translateY(-200%); 715 -moz-transform: translateY(-200%); 716 -ms-transform: translateY(-200%); 717 transform: translateY(-200%); 718 opacity: 0; 719 } 720 721 .md-show.md-effect-19 .md-content { 722 -webkit-transform: translateY(0); 723 -moz-transform: translateY(0); 724 -ms-transform: translateY(0); 725 transform: translateY(0); 726 opacity: 1; 727 -webkit-transition: all 0.5s 0.1s; 728 -moz-transition: all 0.5s 0.1s; 729 transition: all 0.5s 0.1s; 730 } 731 732 @media screen and (max-width: 32em) { 733 body { font-size: 75%; } 734 }
仅供学习，如有不当或需改进之处，请君指出，感谢万分！！！
