html5实现移动端抢红包雨
2024-05-17 15:11:00
搞了很久很久的需求，今天记录一下～
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>红包雨</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1">
<!--在iPhone 手机上禁止了把数字转化为拨号链接-->
<meta content="telephone=no" name="format-detection" />
<!--删除默认的苹果工具栏和菜单栏-->
<meta content="yes" name="apple-mobile-web-app-capable">
<!-- 网站开启对web app程序的支持，在web app应用下状态条（屏幕顶部条）的颜色，默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）-->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/demo.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/sweet-alert.css">
<style type="text/css">body {margin: 0;padding: 0;position: relative;background-position: center;width: 100%;height: 100%;overflow-y: hidden;background:url(images/bj.jpg) no-repeat top left ;background-size: 100%;}.couten {width: 100%;height: 100%;overflow: hidden;overflow-y: hidden;}.couten li {position: absolute;animation: all 3s linear;top:-100px;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.couten li a{display: block;}.mo {position: absolute;top: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, .2);z-index: 100;display: none;}.mo .sen {width: 70%;height: 150px;border-radius: 5px;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;}.mo .sen img {width: 60%;height: 127px;position: absolute;top: 0px;left: 0;right: 0;bottom: 212px;margin: auto;vertical-align: top;}.mo .sen h3 {width: 50%;height: 30px;position: absolute;top: -35px;left: 0;right: 0;bottom: 0;margin: auto;text-align: center;color: red;font-size: 140%;font-weight: bold;z-index: 999;}.mo .sen a {width: 26%;height: 50px;background-color: rgb(174, 222, 244);box-shadow: rgba(174, 222, 244, 0.8) 0px 0px 2px, rgba(0, 0, 0, 0.0470588) 0px 0px 0px 1px inset;position: absolute;top: 100px;left: 0;right: 0;bottom: 0;margin: auto;color: #fff;border-radius: 5px;text-align: center;line-height: 50px;text-decoration: none;}.backward{width: 100%;background:#ccc;opacity: 0.5;position: absolute;top: 0;}.backward span{display: inline-block;width: 100px;height: 100px;color: #000;font-weight: bold;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;text-align: center;line-height: 100px;font-size: 1000%;}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script> // 记得引入jquery
<script type="text/javascript">$(document).ready(function() {var win = (parseInt($(".couten").css("width"))) - 60;$(".mo").css("height", $(document).height());$(".couten").css("height", $(document).height());$(".backward").css("height", $(document).height());$("li").css({});// 点击确认的时候关闭模态层$(".sen a").click(function(){$(".mo").css("display", "none")});var del = function(){nums++;
// console.info(nums);
// console.log($(".li" + nums).css("left"));$(".li" + nums).remove();setTimeout(del,200)}var add = function() {var hb = parseInt(Math.random() * (3 - 1) + 1);var Wh = parseInt(Math.random() * (70 - 30) + 20);var Left = parseInt(Math.random() * (win - 0) + 0);var rot = (parseInt(Math.random() * (45 - (-45)) - 45)) + "deg";// console.log(rot)num++;$(".couten").append("<li class='li" + num + "' ><a href='javascript:;'><img src='images/hb_" + hb + ".png'></a></li>");$(".li" + num).css({"left": Left,});$(".li" + num + " a img").css({"width": Wh,"transform": "rotate(" + rot + ")","-webkit-transform": "rotate(" + rot + ")","-ms-transform": "rotate(" + rot + ")", /* Internet Explorer */"-moz-transform": "rotate(" + rot + ")", /* Firefox */"-webkit-transform": "rotate(" + rot + ")",/* Safari 和 Chrome */"-o-transform": "rotate(" + rot + ")" /* Opera */}); $(".li" + num).animate({'top':$(window).height()+20},5000,function(){//删掉已经显示的红包this.remove()});//点击红包的时候弹出模态层$(".li" + num).click(function(){$(".mo").css("display", "block")});setTimeout(add,200)} //增加红包var num = 0;setTimeout(add,3000);//倒数计时var backward = function(){numz--;if(numz>0){$(".backward span").html(numz);}else{$(".backward").remove();}setTimeout(backward,1000)}var numz = 4;backward();})
</script></head>
<body>
<ul class="couten"><!--<li><a href="#"><img src="data:images/hb_1.png"></a></li>-->
</ul>
<div class="mo"><div class="sen"><img src="data:images/gx.png"><h3>获得红包3元</h3><a href="#">确定</a></div>
</div>
<div class="backward"><span></span>
</div>
</body>
</html>demo.css
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0;padding: 0;border: 0;font: inherit;font-size: 100%;vertical-align: baseline;
}html {line-height: 1;
}ol, ul {list-style: none;
}table {border-collapse: collapse;border-spacing: 0;
}caption, th, td {text-align: left;font-weight: normal;vertical-align: middle;
}q, blockquote {quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {content: "";content: none;
}a img {border: none;
}article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {display: block;
}sweet-alert.css
.sweet-overlay {background-color: rgba(0, 0, 0, 0.4);position: fixed;left: 0;right: 0;top: 0;bottom: 0;display: none;z-index: 1000; }.sweet-alert {background-color: white;font-family:'Microsoft Yahei';width: 478px;padding: 17px;border-radius: 5px;text-align: center;position: fixed;left: 50%;top: 50%;margin-left: -256px;margin-top: -200px;overflow: hidden;display: none;z-index: 2000; }@media all and (max-width: 540px) {.sweet-alert {width: auto;margin-left: 0;margin-right: 0;left: 15px;right: 15px; } }.sweet-alert h2 {color: #575757;font-size: 30px;text-align: center;font-weight: 600;text-transform: none;position: relative; }.sweet-alert p {color: #797979;font-size: 16px;text-align: center;font-weight: 300;position: relative;margin: 0;line-height: normal; }.sweet-alert button {font-family: Arial, Helvetica, sans-serif;background-color: #AEDEF4;color: white;border: none;box-shadow: none;font-size: 17px;font-weight: 500;border-radius: 5px;padding: 10px 32px;margin: 26px 5px 0 5px;cursor: pointer; }.sweet-alert button:focus {outline: none;box-shadow: 0 0 2px rgba(128, 179, 235, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.05); }.sweet-alert button:hover {background-color: #a1d9f2; }.sweet-alert button:active {background-color: #81ccee; }.sweet-alert button.cancel {background-color: #D0D0D0; }.sweet-alert button.cancel:hover {background-color: #c8c8c8; }.sweet-alert button.cancel:active {background-color: #b6b6b6; }.sweet-alert button.cancel:focus {box-shadow: rgba(197, 205, 211, 0.8) 0px 0px 2px, rgba(0, 0, 0, 0.0470588) 0px 0px 0px 1px inset !important; }.sweet-alert[data-has-cancel-button=false] button {box-shadow: none !important; }.sweet-alert .icon {width: 80px;height: 80px;border: 4px solid gray;border-radius: 50%;margin: 20px auto;position: relative;box-sizing: content-box; }.sweet-alert .icon.error {border-color: #F27474; }.sweet-alert .icon.error .x-mark {position: relative;display: block; }.sweet-alert .icon.error .line {position: absolute;height: 5px;width: 47px;background-color: #F27474;display: block;top: 37px;border-radius: 2px; }.sweet-alert .icon.error .line.left {-webkit-transform: rotate(45deg);transform: rotate(45deg);left: 17px; }.sweet-alert .icon.error .line.right {-webkit-transform: rotate(-45deg);transform: rotate(-45deg);right: 16px; }.sweet-alert .icon.warning {border-color: #F8BB86; }.sweet-alert .icon.warning .body {position: absolute;width: 5px;height: 47px;left: 50%;top: 10px;border-radius: 2px;margin-left: -2px;background-color: #F8BB86; }.sweet-alert .icon.warning .dot {position: absolute;width: 7px;height: 7px;border-radius: 50%;margin-left: -3px;left: 50%;bottom: 10px;background-color: #F8BB86; }.sweet-alert .icon.info {border-color: #C9DAE1; }.sweet-alert .icon.info::before {content: "";position: absolute;width: 5px;height: 29px;left: 50%;bottom: 17px;border-radius: 2px;margin-left: -2px;background-color: #C9DAE1; }.sweet-alert .icon.info::after {content: "";position: absolute;width: 7px;height: 7px;border-radius: 50%;margin-left: -3px;top: 19px;background-color: #C9DAE1; }.sweet-alert .icon.success {border-color: #A5DC86; }.sweet-alert .icon.success::before, .sweet-alert .icon.success::after {content: '';border-radius: 50%;position: absolute;width: 60px;height: 120px;background: white;transform: rotate(45deg); }.sweet-alert .icon.success::before {border-radius: 120px 0 0 120px;top: -7px;left: -33px;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);-webkit-transform-origin: 60px 60px;transform-origin: 60px 60px; }.sweet-alert .icon.success::after {border-radius: 0 120px 120px 0;top: -11px;left: 30px;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);-webkit-transform-origin: 0px 60px;transform-origin: 0px 60px; }.sweet-alert .icon.success .placeholder {width: 80px;height: 80px;border: 4px solid rgba(165, 220, 134, 0.2);border-radius: 50%;box-sizing: content-box;position: absolute;left: -4px;top: -4px;z-index: 2; }.sweet-alert .icon.success .fix {width: 5px;height: 90px;background-color: white;position: absolute;left: 28px;top: 8px;z-index: 1;-webkit-transform: rotate(-45deg);transform: rotate(-45deg); }.sweet-alert .icon.success .line {height: 5px;background-color: #A5DC86;display: block;border-radius: 2px;position: absolute;z-index: 2; }.sweet-alert .icon.success .line.tip {width: 25px;left: 14px;top: 46px;-webkit-transform: rotate(45deg);transform: rotate(45deg); }.sweet-alert .icon.success .line.long {width: 47px;right: 8px;top: 38px;-webkit-transform: rotate(-45deg);transform: rotate(-45deg); }.sweet-alert .icon.custom {width: 118px !important;height: 122px !important;background-size: contain;border-radius: 0;border: none;background-position: center center;background-repeat: no-repeat; }@-webkit-keyframes showSweetAlert {0% {transform: scale(0.7);-webkit-transform: scale(0.7); }45% {transform: scale(1.05);-webkit-transform: scale(1.05); }80% {transform: scale(0.95);-webkit-tranform: scale(0.95); }100% {transform: scale(1);-webkit-transform: scale(1); } }
@-moz-keyframes showSweetAlert {0% {transform: scale(0.7);-webkit-transform: scale(0.7); }45% {transform: scale(1.05);-webkit-transform: scale(1.05); }80% {transform: scale(0.95);-webkit-tranform: scale(0.95); }100% {transform: scale(1);-webkit-transform: scale(1); } }
@keyframes showSweetAlert {0% {transform: scale(0.7);-webkit-transform: scale(0.7); }45% {transform: scale(1.05);-webkit-transform: scale(1.05); }80% {transform: scale(0.95);-webkit-tranform: scale(0.95); }100% {transform: scale(1);-webkit-transform: scale(1); } }
@-webkit-keyframes hideSweetAlert {0% {transform: scale(1);-webkit-transform: scale(1); }100% {transform: scale(0.5);-webkit-transform: scale(0.5); } }
@-moz-keyframes hideSweetAlert {0% {transform: scale(1);-webkit-transform: scale(1); }100% {transform: scale(0.5);-webkit-transform: scale(0.5); } }
@keyframes hideSweetAlert {0% {transform: scale(1);-webkit-transform: scale(1); }100% {transform: scale(0.5);-webkit-transform: scale(0.5); } }
.showSweetAlert {-webkit-animation: showSweetAlert 0.3s;-moz-animation: showSweetAlert 0.3s;animation: showSweetAlert 0.3s; }.hideSweetAlert {-webkit-animation: hideSweetAlert 0.2s;-moz-animation: hideSweetAlert 0.2s;animation: hideSweetAlert 0.2s; }@-webkit-keyframes animateSuccessTip {0% {width: 0;left: 1px;top: 19px; }54% {width: 0;left: 1px;top: 19px; }70% {width: 50px;left: -8px;top: 37px; }84% {width: 17px;left: 21px;top: 48px; }100% {width: 25px;left: 14px;top: 45px; } }
@-moz-keyframes animateSuccessTip {0% {width: 0;left: 1px;top: 19px; }54% {width: 0;left: 1px;top: 19px; }70% {width: 50px;left: -8px;top: 37px; }84% {width: 17px;left: 21px;top: 48px; }100% {width: 25px;left: 14px;top: 45px; } }
@keyframes animateSuccessTip {0% {width: 0;left: 1px;top: 19px; }54% {width: 0;left: 1px;top: 19px; }70% {width: 50px;left: -8px;top: 37px; }84% {width: 17px;left: 21px;top: 48px; }100% {width: 25px;left: 14px;top: 45px; } }
@-webkit-keyframes animateSuccessLong {0% {width: 0;right: 46px;top: 54px; }65% {width: 0;right: 46px;top: 54px; }84% {width: 55px;right: 0px;top: 35px; }100% {width: 47px;right: 8px;top: 38px; } }
@-moz-keyframes animateSuccessLong {0% {width: 0;right: 46px;top: 54px; }65% {width: 0;right: 46px;top: 54px; }84% {width: 55px;right: 0px;top: 35px; }100% {width: 47px;right: 8px;top: 38px; } }
@keyframes animateSuccessLong {0% {width: 0;right: 46px;top: 54px; }65% {width: 0;right: 46px;top: 54px; }84% {width: 55px;right: 0px;top: 35px; }100% {width: 47px;right: 8px;top: 38px; } }
@-webkit-keyframes rotatePlaceholder {0% {transform: rotate(-45deg);-webkit-transform: rotate(-45deg); }5% {transform: rotate(-45deg);-webkit-transform: rotate(-45deg); }12% {transform: rotate(-405deg);-webkit-transform: rotate(-405deg); }100% {transform: rotate(-405deg);-webkit-transform: rotate(-405deg); } }
@-moz-keyframes rotatePlaceholder {0% {transform: rotate(-45deg);-webkit-transform: rotate(-45deg); }5% {transform: rotate(-45deg);-webkit-transform: rotate(-45deg); }12% {transform: rotate(-405deg);-webkit-transform: rotate(-405deg); }100% {transform: rotate(-405deg);-webkit-transform: rotate(-405deg); } }
@keyframes rotatePlaceholder {0% {transform: rotate(-45deg);-webkit-transform: rotate(-45deg); }5% {transform: rotate(-45deg);-webkit-transform: rotate(-45deg); }12% {transform: rotate(-405deg);-webkit-transform: rotate(-405deg); }100% {transform: rotate(-405deg);-webkit-transform: rotate(-405deg); } }
.animateSuccessTip {-webkit-animation: animateSuccessTip 0.75s;-moz-animation: animateSuccessTip 0.75s;animation: animateSuccessTip 0.75s; }.animateSuccessLong {-webkit-animation: animateSuccessLong 0.75s;-moz-animation: animateSuccessLong 0.75s;animation: animateSuccessLong 0.75s; }.icon.success.animate::after {-webkit-animation: rotatePlaceholder 4.25s ease-in;-moz-animation: rotatePlaceholder 4.25s ease-in;animation: rotatePlaceholder 4.25s ease-in; }@-webkit-keyframes animateErrorIcon {0% {transform: rotateX(100deg);-webkit-transform: rotateX(100deg);opacity: 0; }100% {transform: rotateX(0deg);-webkit-transform: rotateX(0deg);opacity: 1; } }
@-moz-keyframes animateErrorIcon {0% {transform: rotateX(100deg);-webkit-transform: rotateX(100deg);opacity: 0; }100% {transform: rotateX(0deg);-webkit-transform: rotateX(0deg);opacity: 1; } }
@keyframes animateErrorIcon {0% {transform: rotateX(100deg);-webkit-transform: rotateX(100deg);opacity: 0; }100% {transform: rotateX(0deg);-webkit-transform: rotateX(0deg);opacity: 1; } }
.animateErrorIcon {-webkit-animation: animateErrorIcon 0.5s;-moz-animation: animateErrorIcon 0.5s;animation: animateErrorIcon 0.5s; }@-webkit-keyframes animateXMark {0% {transform: scale(0.4);-webkit-transform: scale(0.4);margin-top: 26px;opacity: 0; }50% {transform: scale(0.4);-webkit-transform: scale(0.4);margin-top: 26px;opacity: 0; }80% {transform: scale(1.15);-webkit-transform: scale(1.15);margin-top: -6px; }100% {transform: scale(1);-webkit-transform: scale(1);margin-top: 0;opacity: 1; } }
@-moz-keyframes animateXMark {0% {transform: scale(0.4);-webkit-transform: scale(0.4);margin-top: 26px;opacity: 0; }50% {transform: scale(0.4);-webkit-transform: scale(0.4);margin-top: 26px;opacity: 0; }80% {transform: scale(1.15);-webkit-transform: scale(1.15);margin-top: -6px; }100% {transform: scale(1);-webkit-transform: scale(1);margin-top: 0;opacity: 1; } }
@keyframes animateXMark {0% {transform: scale(0.4);-webkit-transform: scale(0.4);margin-top: 26px;opacity: 0; }50% {transform: scale(0.4);-webkit-transform: scale(0.4);margin-top: 26px;opacity: 0; }80% {transform: scale(1.15);-webkit-transform: scale(1.15);margin-top: -6px; }100% {transform: scale(1);-webkit-transform: scale(1);margin-top: 0;opacity: 1; } }
.animateXMark {-webkit-animation: animateXMark 0.5s;-moz-animation: animateXMark 0.5s;animation: animateXMark 0.5s; }@-webkit-keyframes pulseWarning {0% {border-color: #F8D486; }100% {border-color: #F8BB86; } }
@-moz-keyframes pulseWarning {0% {border-color: #F8D486; }100% {border-color: #F8BB86; } }
@keyframes pulseWarning {0% {border-color: #F8D486; }100% {border-color: #F8BB86; } }
.pulseWarning {-webkit-animation: pulseWarning 0.75s infinite alternate;-moz-animation: pulseWarning 0.75s infinite alternate;animation: pulseWarning 0.75s infinite alternate; }@-webkit-keyframes pulseWarningIns {0% {background-color: #F8D486; }100% {background-color: #F8BB86; } }
@-moz-keyframes pulseWarningIns {0% {background-color: #F8D486; }100% {background-color: #F8BB86; } }
@keyframes pulseWarningIns {0% {background-color: #F8D486; }100% {background-color: #F8BB86; } }
.pulseWarningIns {-webkit-animation: pulseWarningIns 0.75s infinite alternate;-moz-animation: pulseWarningIns 0.75s infinite alternate;animation: pulseWarningIns 0.75s infinite alternate; }
图片资源：
注⚠️：还需引入jquery库(jquery.min.js)。
html5实现移动端抢红包雨相关推荐
- html实现在线聊天,利用HTML5实现电脑端微信聊天窗口界面
特效描述:利用HTML5实现 电脑端 微信聊天 窗口界面.利用HTML5实现电脑端微信聊天窗口界面 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 Thomas Bangalter 2 ...
- 红包html页面,JavaScript Html实现移动端红包雨功能页面
本文实例为大家分享了Html实现移动端红包雨功能页面的具体代码,供大家参考,具体内容如下 实现效果如下: 具体代码如下 html部分: 红包雨 demo.css为初始化css,可以不加 index.c ...
- html对话框特效,基于html5手机移动端对话框特效
基于html5手机移动端对话框特效.这是一款适用于手机移动端的文字提示弹出框特效.效果图如下: 实现的代码: //成功 $("#success").click(function ( ...
- h5红包雨代码_html5移动端手机微信抢红包雨代码
js代码 $(document).ready(function() { var win = (parseInt($(".couten").css("width" ...
- 空气质量html模板,基于HTML5+CSS3移动端空气质量APP的设计与实现
摘要: 本文设计的空气质量APP是在Android系统上运行的.在"智慧城市"和"互联网+"的背景下,人们更加关注"健康"这个话题,日常出行 ...
- 基于Html5的移动端开发框架的研究
下面统计信息部分来自网络,不代表个人观点.请大家参考. 基于Html5移动端开发框架调查 序号 框架 简介 优点 缺 ...
- 黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程（HTML）
一.基础班学习路线 二.HTML5基础 1.网页的相关概念 什么是网页 网站是网页的集合 网页是网站中的一页,通常是HTML格式的文件,网页是构成网站的基本元素,常见以**.htm或.html**后缀 ...
- HTML5：移动端开发入门
HTML5:移动端开发入门 一.前言 常见的移动端开发分为移动版网站和响应式设计. 移动端开发可以让技术人员专注于移动端的页面优化,而无需在意桌面版的兼容,但页面一旦改动内容,维护成本就翻倍了: 响应 ...
- HTML5与移动端web学习笔记
概述 HTML5 提供了很多新的功能,主要有: 全选复制放进笔记 新的 HTML 元素,例如 section, nav, header, footer, article 等 用于绘画的 Canvas ...
最新文章
- JAVA正则表达式的学习
- Hadoop系列七：Hadoop之sqoop篇
- js编写简易返回顶部按钮
- keypairgenerator生成的公钥是不变的么_bitcoin 地址是如何生成的
- OpenShift 4之唤醒休眠的OpenShift应用
- ntpdate从指定服务器同步时间,ntpdate:设置服务器时间定期同步
- 合并报表excel自动模板_自动合并
- 如果将OpenGL的MVP矩阵设置为单位阵
- 感谢一路相伴的朋友们！我的个人工作室招人啦！
- 这些实用的手机小技巧分享给你
- 没项目实战经验？分享自学练手的软件测试项目实战+数据库+接口，部署超级简单
- 原创 | SpringBoot版本竟然引发这种问题，让我吐血三升！
- 如何在iPad，iPad mini，iPad Air和iPad Pro之间进行选择？
- 1055: 猴子吃桃
- 【视频号推广】小程序怎么申请推广，以及怎么给自己的视频号推广
- 按理说机械硬盘和固态硬盘使用得当寿命几乎一样长，但为什么网上传言机械硬盘更容易坏？
- css3 三角形_用尺规作直线同时平分三角形面积和周长
- 2007年12月14日
- 教你如何简便下载网站上的视频
- ei eo 功能类型_速求，74LS148的输入信号EI和输出信号GS,EO的作用分别是什么？谢谢了...