节日弹窗海报代码

    选择打赏方式

温馨提示:
本文最后更新于2023年02月21日,已超过1年1个月(约402天)没有更新,若内容或图片失效,请留言反馈。

  逛博客时 访问@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>

版权声明:若无特殊注明,本文为《寒星皓月》原创,转载请保留文章出处。
本文链接:https://www.wanghanyue.com/post-85.html
作品采用:知识共享署名 4.0 (CC BY-NC-SA 4.0) 国际许可协议 进行许可。
正文到此结束

相关推荐

发表吐槽

你肿么看?

你还可以输入 250 / 250 个字

呵呵 哈哈 羡慕 惊恐 超赞 嗯哼 滑稽 不高兴 大哭 疑问 你懂得 打脸 黑线 委屈 小乖 酷 笑眼 汗 what 鄙视 喷 阴险 怒 吃瓜

评论信息框
可使用QQ号实时获取昵称+头像

私密评论

吃奶的力气提交吐槽中...


既然没有吐槽,那就赶紧抢沙发吧!