Simulate the android Toast prompt, and randomly pick out 19 special effects of CSS3

Simulate the android Toast prompt, and randomly pick out 19 special effects of CSS3
JS:

/*** Display prompt box * @ param {Object} id */function showModel (content) {$ (". md-content "content.html (content); $ (" # modalCustom "). addClass ("md-show"); t = setTimeout ('hidemodel ("modalCustom") ', 3000 );} /*** hide the prompt box * @ param {Object} id */function hideModel () {$ ("# modalCustom "). removeClass ("md-show"); clearTimeout (t);}/*** create a pop-up window */function createModel () {var modelDiv = document. createElement ('div '); modelDiv. setAttribute ('class', 'md-modal md-effect-1 '); modelDiv. setAttribute ('id', 'modalcustom'); var modelDivSpan = document. createElement ('span '); modelDivSpan. setAttribute ('class', 'md-content'); modelDiv. appendChild (modelDivSpan); document. body. appendChild (modelDiv );}

 

 

CSS3:

/* General styles for the modal */.md-modal {position: fixed;top: 80%;left: 50%;display: inline-block;height: auto;z-index: 2000;visibility: hidden;-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;backface-visibility: hidden;-webkit-transform: translateX(-50%) translateY(-50%);-moz-transform: translateX(-50%) translateY(-50%);-ms-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%);}.md-show {visibility: visible;}/* Content styles */.md-content {color: #FFF;background: rgba(0,0,0,0.5);position: relative;border-radius: 2px;margin: 0px auto;padding: 5px 10px;max-width: 300px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}.md-content h3 {margin: 0;padding: 5px;text-align: center;opacity: 0.8;background: rgba(0,0,0,0.1);border-radius: 3px 3px 0 0;}.md-content > div {padding: 15px 40px 30px;margin: 0;font-weight: 300;font-size: 16px;}.md-content > div p {margin: 0;padding: 10px 0;}/* Individual modal styles with animations/transitions *//* Effect 1: Fade in and scale up */.md-effect-1 .md-content {-webkit-transform: scale(0.7);-moz-transform: scale(0.7);-ms-transform: scale(0.7);transform: scale(0.7);opacity: 0;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s;}.md-show.md-effect-1 .md-content {-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);transform: scale(1);opacity: 1;}/* Effect 2: Slide from the right */.md-effect-2 .md-content {-webkit-transform: translateX(20%);-moz-transform: translateX(20%);-ms-transform: translateX(20%);transform: translateX(20%);opacity: 0;-webkit-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);-moz-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);}.md-show.md-effect-2 .md-content {-webkit-transform: translateX(0);-moz-transform: translateX(0);-ms-transform: translateX(0);transform: translateX(0);opacity: 1;}/* Effect 3: Slide from the bottom */.md-effect-3 .md-content {-webkit-transform: translateY(20%);-moz-transform: translateY(20%);-ms-transform: translateY(20%);transform: translateY(20%);opacity: 0;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s;}.md-show.md-effect-3 .md-content {-webkit-transform: translateY(0);-moz-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);opacity: 1;}/* Effect 4: Newspaper */.md-effect-4 .md-content {-webkit-transform: scale(0) rotate(720deg);-moz-transform: scale(0) rotate(720deg);-ms-transform: scale(0) rotate(720deg);transform: scale(0) rotate(720deg);opacity: 0;}.md-show.md-effect-4 ~ .md-overlay,.md-effect-4 .md-content {-webkit-transition: all 0.5s;-moz-transition: all 0.5s;transition: all 0.5s;}.md-show.md-effect-4 .md-content {-webkit-transform: scale(1) rotate(0deg);-moz-transform: scale(1) rotate(0deg);-ms-transform: scale(1) rotate(0deg);transform: scale(1) rotate(0deg);opacity: 1;}/* Effect 5: fall */.md-effect-5.md-modal {-webkit-perspective: 1300px;-moz-perspective: 1300px;perspective: 1300px;}.md-effect-5 .md-content {-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;transform-style: preserve-3d;-webkit-transform: translateZ(600px) rotateX(20deg); -moz-transform: translateZ(600px) rotateX(20deg); -ms-transform: translateZ(600px) rotateX(20deg); transform: translateZ(600px) rotateX(20deg); opacity: 0;}.md-show.md-effect-5 .md-content {-webkit-transition: all 0.3s ease-in;-moz-transition: all 0.3s ease-in;transition: all 0.3s ease-in;-webkit-transform: translateZ(0px) rotateX(0deg);-moz-transform: translateZ(0px) rotateX(0deg);-ms-transform: translateZ(0px) rotateX(0deg);transform: translateZ(0px) rotateX(0deg); opacity: 1;}/* Effect 6: side fall */.md-effect-6.md-modal {-webkit-perspective: 1300px;-moz-perspective: 1300px;perspective: 1300px;}.md-effect-6 .md-content {-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;transform-style: preserve-3d;-webkit-transform: translate(30%) translateZ(600px) rotate(10deg); -moz-transform: translate(30%) translateZ(600px) rotate(10deg);-ms-transform: translate(30%) translateZ(600px) rotate(10deg);transform: translate(30%) translateZ(600px) rotate(10deg); opacity: 0;}.md-show.md-effect-6 .md-content {-webkit-transition: all 0.3s ease-in;-moz-transition: all 0.3s ease-in;transition: all 0.3s ease-in;-webkit-transform: translate(0%) translateZ(0) rotate(0deg);-moz-transform: translate(0%) translateZ(0) rotate(0deg);-ms-transform: translate(0%) translateZ(0) rotate(0deg);transform: translate(0%) translateZ(0) rotate(0deg);opacity: 1;}/* Effect 7:  slide and stick to top */.md-effect-7{top: 0;-webkit-transform: translateX(-50%);-moz-transform: translateX(-50%);-ms-transform: translateX(-50%);transform: translateX(-50%);}.md-effect-7 .md-content {-webkit-transform: translateY(-200%);-moz-transform: translateY(-200%);-ms-transform: translateY(-200%);transform: translateY(-200%);-webkit-transition: all .3s;-moz-transition: all .3s;transition: all .3s;opacity: 0;}.md-show.md-effect-7 .md-content {-webkit-transform: translateY(0%);-moz-transform: translateY(0%);-ms-transform: translateY(0%);transform: translateY(0%);border-radius: 0 0 3px 3px;opacity: 1;}/* Effect 8: 3D flip horizontal */.md-effect-8.md-modal {-webkit-perspective: 1300px;-moz-perspective: 1300px;perspective: 1300px;}.md-effect-8 .md-content {-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;transform-style: preserve-3d;-webkit-transform: rotateY(-70deg);-moz-transform: rotateY(-70deg);-ms-transform: rotateY(-70deg);transform: rotateY(-70deg);-webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s;opacity: 0;}.md-show.md-effect-8 .md-content {-webkit-transform: rotateY(0deg);-moz-transform: rotateY(0deg);-ms-transform: rotateY(0deg);transform: rotateY(0deg);opacity: 1;}/* Effect 9: 3D flip vertical */.md-effect-9.md-modal {-webkit-perspective: 1300px;-moz-perspective: 1300px;perspective: 1300px;}.md-effect-9 .md-content {-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;transform-style: preserve-3d;-webkit-transform: rotateX(-70deg);-moz-transform: rotateX(-70deg);-ms-transform: rotateX(-70deg);transform: rotateX(-70deg);-webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s;opacity: 0;}.md-show.md-effect-9 .md-content {-webkit-transform: rotateX(0deg);-moz-transform: rotateX(0deg);-ms-transform: rotateX(0deg);transform: rotateX(0deg);opacity: 1;}/* Effect 10: 3D sign */.md-effect-10.md-modal {-webkit-perspective: 1300px;-moz-perspective: 1300px;perspective: 1300px;}.md-effect-10 .md-content {-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;transform-style: preserve-3d;-webkit-transform: rotateX(-60deg);-moz-transform: rotateX(-60deg);-ms-transform: rotateX(-60deg);transform: rotateX(-60deg);-webkit-transform-origin: 50% 0;-moz-transform-origin: 50% 0;transform-origin: 50% 0;opacity: 0;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s;}.md-show.md-effect-10 .md-content {-webkit-transform: rotateX(0deg);-moz-transform: rotateX(0deg);-ms-transform: rotateX(0deg);transform: rotateX(0deg);opacity: 1;}/* Effect 11: Super scaled */.md-effect-11 .md-content {-webkit-transform: scale(2);-moz-transform: scale(2);-ms-transform: scale(2);transform: scale(2);opacity: 0;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s;}.md-show.md-effect-11 .md-content {-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);transform: scale(1);opacity: 1;}/* Effect 12:  Just me */.md-effect-12 .md-content {-webkit-transform: scale(0.8);-moz-transform: scale(0.8);-ms-transform: scale(0.8);transform: scale(0.8);opacity: 0;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s;}.md-show.md-effect-12 ~ .md-overlay {background: #e74c3c;} .md-effect-12 .md-content h3,.md-effect-12 .md-content {background: transparent;}.md-show.md-effect-12 .md-content {-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);transform: scale(1);opacity: 1;}/* Effect 13: 3D slit */.md-effect-13.md-modal {-webkit-perspective: 1300px;-moz-perspective: 1300px;perspective: 1300px;}.md-effect-13 .md-content {-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;transform-style: preserve-3d;-webkit-transform: translateZ(-3000px) rotateY(90deg);-moz-transform: translateZ(-3000px) rotateY(90deg);-ms-transform: translateZ(-3000px) rotateY(90deg);transform: translateZ(-3000px) rotateY(90deg);opacity: 0;}.md-show.md-effect-13 .md-content {-webkit-animation: slit .7s forwards ease-out;-moz-animation: slit .7s forwards ease-out;animation: slit .7s forwards ease-out;}@-webkit-keyframes slit {50% { -webkit-transform: translateZ(-250px) rotateY(89deg); opacity: .5; -webkit-animation-timing-function: ease-out;}100% { -webkit-transform: translateZ(0) rotateY(0deg); opacity: 1; }}@-moz-keyframes slit {50% { -moz-transform: translateZ(-250px) rotateY(89deg); opacity: .5; -moz-animation-timing-function: ease-out;}100% { -moz-transform: translateZ(0) rotateY(0deg); opacity: 1; }}@keyframes slit {50% { transform: translateZ(-250px) rotateY(89deg); opacity: 1; animation-timing-function: ease-in;}100% { transform: translateZ(0) rotateY(0deg); opacity: 1; }}/* Effect 14:  3D Rotate from bottom */.md-effect-14.md-modal {-webkit-perspective: 1300px;-moz-perspective: 1300px;perspective: 1300px;}.md-effect-14 .md-content {-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;transform-style: preserve-3d;-webkit-transform: translateY(100%) rotateX(90deg);-moz-transform: translateY(100%) rotateX(90deg);-ms-transform: translateY(100%) rotateX(90deg);transform: translateY(100%) rotateX(90deg);-webkit-transform-origin: 0 100%;-moz-transform-origin: 0 100%;transform-origin: 0 100%;opacity: 0;-webkit-transition: all 0.3s ease-out;-moz-transition: all 0.3s ease-out;transition: all 0.3s ease-out;}.md-show.md-effect-14 .md-content {-webkit-transform: translateY(0%) rotateX(0deg);-moz-transform: translateY(0%) rotateX(0deg);-ms-transform: translateY(0%) rotateX(0deg);transform: translateY(0%) rotateX(0deg);opacity: 1;}/* Effect 15:  3D Rotate in from left */.md-effect-15.md-modal {-webkit-perspective: 1300px;-moz-perspective: 1300px;perspective: 1300px;}.md-effect-15 .md-content {-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;transform-style: preserve-3d;-webkit-transform: translateZ(100px) translateX(-30%) rotateY(90deg);-moz-transform: translateZ(100px) translateX(-30%) rotateY(90deg);-ms-transform: translateZ(100px) translateX(-30%) rotateY(90deg);transform: translateZ(100px) translateX(-30%) rotateY(90deg);-webkit-transform-origin: 0 100%;-moz-transform-origin: 0 100%;transform-origin: 0 100%;opacity: 0;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s;}.md-show.md-effect-15 .md-content {-webkit-transform: translateZ(0px) translateX(0%) rotateY(0deg);-moz-transform: translateZ(0px) translateX(0%) rotateY(0deg);-ms-transform: translateZ(0px) translateX(0%) rotateY(0deg);transform: translateZ(0px) translateX(0%) rotateY(0deg);opacity: 1;}/* Effect 16:  Blur */.md-show.md-effect-16 ~ .md-overlay {background: rgba(180,46,32,0.5);}.md-show.md-effect-16 ~ .container {-webkit-filter: blur(3px);-moz-filter: blur(3px);filter: blur(3px);}.md-effect-16 .md-content {-webkit-transform: translateY(-5%);-moz-transform: translateY(-5%);-ms-transform: translateY(-5%);transform: translateY(-5%);opacity: 0;}.md-show.md-effect-16 ~ .container,.md-effect-16 .md-content {-webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s;}.md-show.md-effect-16 .md-content {-webkit-transform: translateY(0);-moz-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);opacity: 1;}/* Effect 17:  Slide in from bottom with perspective on container */.md-show.md-effect-17 ~ .container {height: 100%;overflow: hidden;-webkit-transition: -webkit-transform 0.3s;-moz-transition: -moz-transform 0.3s;transition: transform 0.3s;}.md-show.md-effect-17 ~ .container,.md-show.md-effect-17 ~ .md-overlay  {-webkit-transform: rotateX(-2deg);-moz-transform: rotateX(-2deg);-ms-transform: rotateX(-2deg);transform: rotateX(-2deg);-webkit-transform-origin: 50% 0%;-moz-transform-origin: 50% 0%;transform-origin: 50% 0%;-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;transform-style: preserve-3d;}.md-effect-17 .md-content {opacity: 0;-webkit-transform: translateY(200%);-moz-transform: translateY(200%);-ms-transform: translateY(200%);transform: translateY(200%);}.md-show.md-effect-17 .md-content {-webkit-transform: translateY(0);-moz-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);opacity: 1;-webkit-transition: all 0.3s 0.2s;-moz-transition: all 0.3s 0.2s;transition: all 0.3s 0.2s;}/* Effect 18:  Slide from right with perspective on container */.md-show.md-effect-18 ~ .container {height: 100%;overflow: hidden;}.md-show.md-effect-18 ~ .md-overlay {background: rgba(143,27,15,0.8);-webkit-transition: all 0.5s;-moz-transition: all 0.5s;transition: all 0.5s;}.md-show.md-effect-18 ~ .container,.md-show.md-effect-18 ~ .md-overlay {-webkit-transform-style: preserve-3d;-webkit-transform-origin: 0% 50%;-webkit-animation: rotateRightSideFirst 0.5s forwards ease-in;-moz-transform-style: preserve-3d;-moz-transform-origin: 0% 50%;-moz-animation: rotateRightSideFirst 0.5s forwards ease-in;transform-style: preserve-3d;transform-origin: 0% 50%;animation: rotateRightSideFirst 0.5s forwards ease-in;}@-webkit-keyframes rotateRightSideFirst {50% { -webkit-transform: translateZ(-50px) rotateY(5deg); -webkit-animation-timing-function: ease-out; }100% { -webkit-transform: translateZ(-200px); }}@-moz-keyframes rotateRightSideFirst {50% { -moz-transform: translateZ(-50px) rotateY(5deg); -moz-animation-timing-function: ease-out; }100% { -moz-transform: translateZ(-200px); }}@keyframes rotateRightSideFirst {50% { transform: translateZ(-50px) rotateY(5deg); animation-timing-function: ease-out; }100% { transform: translateZ(-200px); }}.md-effect-18 .md-content {-webkit-transform: translateX(200%);-moz-transform: translateX(200%);-ms-transform: translateX(200%);transform: translateX(200%);opacity: 0;}.md-show.md-effect-18 .md-content {-webkit-transform: translateX(0);-moz-transform: translateX(0);-ms-transform: translateX(0);transform: translateX(0);opacity: 1;-webkit-transition: all 0.5s 0.1s;-moz-transition: all 0.5s 0.1s;transition: all 0.5s 0.1s;}/* Effect 19:  Slip in from the top with perspective on container */.md-show.md-effect-19 ~ .container {height: 100%;overflow: hidden;}.md-show.md-effect-19 ~ .md-overlay {-webkit-transition: all 0.5s;-moz-transition: all 0.5s;transition: all 0.5s;}.md-show.md-effect-19 ~ .container,.md-show.md-effect-19 ~ .md-overlay {-webkit-transform-style: preserve-3d;-webkit-transform-origin: 50% 100%;-webkit-animation: OpenTop 0.5s forwards ease-in;-moz-transform-style: preserve-3d;-moz-transform-origin: 50% 100%;-moz-animation: OpenTop 0.5s forwards ease-in;transform-style: preserve-3d;transform-origin: 50% 100%;animation: OpenTop 0.5s forwards ease-in;}@-webkit-keyframes OpenTop {50% { -webkit-transform: rotateX(10deg); -webkit-animation-timing-function: ease-out; }}@-moz-keyframes OpenTop {50% { -moz-transform: rotateX(10deg); -moz-animation-timing-function: ease-out; }}@keyframes OpenTop {50% { transform: rotateX(10deg); animation-timing-function: ease-out; }}.md-effect-19 .md-content {-webkit-transform: translateY(-200%);-moz-transform: translateY(-200%);-ms-transform: translateY(-200%);transform: translateY(-200%);opacity: 0;}.md-show.md-effect-19 .md-content {-webkit-transform: translateY(0);-moz-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);opacity: 1;-webkit-transition: all 0.5s 0.1s;-moz-transition: all 0.5s 0.1s;transition: all 0.5s 0.1s;}/* @media screen and (max-width: 320) {body { font-size: 75%; }} */