toast弹出框效果
js代码
1 //toast弹出框 2 var layerTime; 3 function layer(txt, time) { 4 clearTimeout(layerTime); 5 var times = time || 2000; 6 $(".layer_wrap").remove(); 7 $("body").append('<div id="layer_wrap" class="layer_wrap"></div>'); 8 $(".layer_wrap").append('<p id="layer" class="layer sct">' + txt + "</p>"); 9 var o = $(".layer").height(); 10 var p = $(".layer").width(); 11 $(".layer_wrap").css({ 12 "margin-top": -o / 2 13 }); 14 layerTime = setTimeout(function() { 15 $(".sct").removeClass("layer").addClass("unlayer"); 16 $(".sct").on("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend",function(){ 17 $(".layer_wrap").remove(); 18 }); 19 }, 20 times) 21 }
css 代码
1 @keyframes ss { 2 0% { 3 opacity: 0; 4 -webkit-transform: scale(.5); 5 -ms-transform: scale(.5); 6 transform: scale(.5) 7 } 8 9 100% { 10 opacity: 1; 11 -webkit-transform: scale(1); 12 -ms-transform: scale(1); 13 transform: scale(1) 14 } 15 } 16 17 @keyframes sss { 18 0% { 19 opacity: 1; 20 -webkit-transform: scale(1); 21 -ms-transform: scale(1); 22 transform: scale(1) 23 } 24 25 100% { 26 opacity: 0; 27 -webkit-transform: scale(.5); 28 -ms-transform: scale(.5); 29 transform: scale(.5) 30 } 31 } 32 33 .layer_wrap { 34 position: fixed; 35 width: 9rem; 36 top: 50%; 37 left: 50%; 38 margin-left: -4.5rem; 39 margin-top: -1rem; 40 text-align: center; 41 z-index: 9999999; 42 } 43 44 .layer { 45 min-width: 3rem; 46 background-color: rgba(0,0,0,.6); 47 border-radius: 8px; 48 display: inline-block; 49 color: #fff; 50 font-size: .32rem; 51 text-align: center; 52 line-height: .4rem; 53 padding: .3rem .6rem; 54 word-break: break-all; 55 animation-name: ss; 56 animation-duration: .3s; 57 animation-timing-function: ease; 58 animation-fill-mode: both; 59 -ms-animation-name: ss; 60 -ms-animation-duration: .3s; 61 -ms-animation-timing-function: ease; 62 -ms-animation-fill-mode: both; 63 -webkit-animation-name: ss; 64 -webkit-animation-duration: .3s; 65 -webkit-animation-timing-function: ease; 66 -webkit-animation-fill-mode: both 67 } 68 69 .unlayer { 70 background-color: rgba(0,0,0,.6); 71 border-radius: 8px; 72 display: inline-block; 73 color: #fff; 74 font-size: .32rem; 75 text-align: center; 76 line-height: .4rem; 77 padding: .3rem .6rem; 78 word-break: break-all; 79 animation-name: sss; 80 animation-duration: .2s; 81 animation-timing-function: ease; 82 animation-fill-mode: both; 83 -ms-animation-name: sss; 84 -ms-animation-duration: .2s; 85 -ms-animation-timing-function: ease; 86 -ms-animation-fill-mode: both; 87 -webkit-animation-name: sss; 88 -webkit-animation-duration: .2s; 89 -webkit-animation-timing-function: ease; 90 -webkit-animation-fill-mode: both 91 }
