逛博客时 访问@Jdeal大佬 站点时进入页面有个弹窗节日海报，加上彩色纸屑的效果很漂亮，感觉很有意思，就把代码扒了过来。
基本上就是 一张图加上一个底层遮罩，点击图片或遮罩后，海报消失。有动手能力的可以另加上cookie记录访问弹窗次数。

效果如下：

代码如下：

<div id="popup" onclick="apopup()">
		<div class="confetti"></div>
		<div class="confetti"></div>
		<div class="confetti"></div>
		<div class="confetti"></div>
		<div class="confetti"></div>
		<div class="confetti"></div>
		<div class="confetti"></div>
		<div class="confetti"></div>
		<div class="confetti"></div>
		<div class="confetti"></div>
		<div class="confetti"></div>
		<div class="confetti"></div>
		<div class="confetti"></div>
		<img src="https://qn.jdeal.cn/popup/0221.gif">
		<div class="popupmask"></div>
		
	<style>body,#wrap{overflow:hidden}#popup{cursor:pointer}@keyframes popupin{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes popupin{0%{opacity:0}100%{opacity:1}}@keyframes popupout{0%{opacity:1}100%{opacity:0}}@-webkit-keyframes popupout{0%{opacity:1}100%{opacity:0}}@keyframes popupmaskout{0%{opacity:.93}100%{opacity:0}}@-webkit-keyframes popupmaskout{0%{opacity:.93}100%{opacity:0}}@keyframes itrain{from{opacity:0}50%{opacity:1}to{transform:translateY(350px)}}@-webkit-keyframes itrain{from{opacity:0}50%{opacity:1}to{transform:translateY(350px)}}#popup img{position:fixed;z-index:9999;border-radius:30px;height:66%;transform:translate(50%,50%);right:50%;bottom:50%;animation:popupin 2s;-webkit-animation:popupin 2s}#popup .popupmask{background:#ffffff;width:100%;height:100%;position:fixed;z-index:999;opacity:.93;top:0;left:0}#popup .confetti{z-index:9999;position:absolute;width:10px;height:30px;background:#ffd300;top:0;opacity:0;display:block;animation-play-state:running!important}#popup .confetti:nth-child(1){left:7%;transform:rotate(-40deg);animation:itrain 1s infinite ease-out;animation-delay:182ms;animation-duration:1116ms}#popup .confetti:nth-child(2){left:14%;transform:rotate(4deg);animation:itrain 1s infinite ease-out;animation-delay:161ms;animation-duration:1076ms}#popup .confetti:nth-child(3){left:21%;transform:rotate(-51deg);animation:itrain 1s infinite ease-out;animation-delay:481ms;animation-duration:1103ms}#popup .confetti:nth-child(4){left:28%;transform:rotate(61deg);animation:itrain 1s infinite ease-out;animation-delay:334ms;animation-duration:708ms}#popup .confetti:nth-child(5){left:35%;transform:rotate(-52deg);animation:itrain 1s infinite ease-out;animation-delay:302ms;animation-duration:776ms}#popup .confetti:nth-child(6){left:42%;transform:rotate(38deg);animation:itrain 1s infinite ease-out;animation-delay:180ms;animation-duration:1168ms}#popup .confetti:nth-child(7){left:49%;transform:rotate(11deg);animation:itrain 1s infinite ease-out;animation-delay:395ms;animation-duration:1.2s}#popup .confetti:nth-child(8){left:56%;transform:rotate(49deg);animation:itrain 1s infinite ease-out;animation-delay:14ms;animation-duration:887ms}#popup .confetti:nth-child(9){left:63%;transform:rotate(-72deg);animation:itrain 1s infinite ease-out;animation-delay:149ms;animation-duration:805ms}#popup .confetti:nth-child(10){left:70%;transform:rotate(10deg);animation:itrain 1s infinite ease-out;animation-delay:351ms;animation-duration:1059ms}#popup .confetti:nth-child(11){left:77%;transform:rotate(4deg);animation:itrain 1s infinite ease-out;animation-delay:307ms;animation-duration:1132ms}#popup .confetti:nth-child(12){left:84%;transform:rotate(42deg);animation:itrain 1s infinite ease-out;animation-delay:464ms;animation-duration:776ms}#popup .confetti:nth-child(13){left:91%;transform:rotate(-72deg);animation:itrain 1s infinite ease-out;animation-delay:429ms;animation-duration:818ms}#popup .confetti:nth-child(odd){background:#7431e8}#popup .confetti:nth-child(4n){width:5px;height:12px;animation-duration:2s}#popup .confetti:nth-child(3n){width:3px;height:10px;animation-duration:2.5s;animation-delay:1s}#popup .confetti:nth-child(4n-7){background:#ff0000}</style>
</div>

	<script>function apopup(){var a=document.createElement("style");a.type="text/css";a.innerHTML="#popup img{animation:popupout 1s!important;-webkit-animation:popupout 1s!important}#popup .popupmask{animation:popupmaskout 1s;-webkit-animation:popupmaskout 1s}#popup .confetti{display:none}";document.getElementById("popup").appendChild(a);setTimeout("document.getElementById('popup').innerHTML = ''",899)}</script>
	<style>::-webkit-scrollbar{width:0px!important}</style>