实现一个简单的H5领红包的动画

最新推荐文章于 2023-05-17 16:00:51 发布

下雨了620

最新推荐文章于 2023-05-17 16:00:51 发布

阅读量764

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/wodexiaoyang/article/details/115732971

版权

HTML5 CSS3 JavaScript 动画效果用户交互

关键词由CSDN通过智能技术生成

html 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

直接上代码：

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta name="author" content="Tocersoft" />
		<meta content="telephone=no" name="format-detection" />
		<meta name="viewport"
			content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
		<title>领红包</title>
		<!--标准mui.css-->
		<script src="jquery-1.8.1.min.js"></script>
		<link type="text/css" rel="stylesheet" media="all" href="mui.min.css">
		<style type="text/css">
			html,body{
				height:100%; 
				width:100%;
			}
			.errorMsg{
				text-align: center;
				letter-spacing: 1px;
				position: relative; 
				top: 50%;
				color : white;
				line-height:35px;
				width: 200px;
				margin: 0 auto;
				font-size: 20px;
			}
			.bottom-button{
				border: 1px solid #fff;
				color: #fff;
				height: 32px;
				width: 128px;
				text-align: center;
				font-size: 12px;
				line-height: 32px;
				border-radius: 16px;
				margin:0px auto;
			}
			.bottom-button1{
				border: 1px solid #fff;
				color: #fff;
				text-align: center;
				font-size: 20px;
				border-radius: 16px;
				margin: 0px auto;
				background-color: #ff6c60;
				bottom: 1%;
				position: absolute;
				width: 60%;
				height: 40px;
				margin-left: 20%;
				letter-spacing: 10px;
				font-weight: normal;
			}
			.bottom-button2{
				background-image: url(r-receive.png);
				width: 10rem;
				height: 10rem;
				background-position: center;
				background-repeat: no-repeat;
				background-size: 100% 100%;
				position: relative;
				left: 0;
				right: 0;
				z-index: 100;
				margin: auto;
				animation: beat 1s infinite;
			}
			@keyframes beat {
				0% {
					transform: rotate(0deg) scale(0.8, 0.8);
					opacity: 1;
				}
				25% {
					transform: rotate(0deg) scale(1, 1);
					opacity: 0.8;
				}
				100% {
					transform: rotate(0deg) scale(0.8, 0.8);
					opacity: 1;
				}
			}
			.bottom-receive{
				background-image: url(r-accomplish.png);
				background-position: center;
				background-repeat: no-repeat;
				background-size: 100% 100%;
				position: relative;
				left: 0;
				right: 0;
				z-index: 100;
				top: 0;
				bottom: 0;
				margin: auto;
				height:0px;
				width:0px;
				display: none;
				opacity: 0;
			}
			.bottom-receive .bottom-receive-money{
				position: relative;
				color: #ed6b5c;
				font-size: 30px;
				font-weight: 600;
				text-align: center;
				width: 100%;
				margin-top: 246.08px;
			}
			.bottom-receive .bottom-receive-title1{
				position: relative;
				color: #ffffff;
				width: 100%;
				left: 65px;
				margin-top: 66px;
			}
			.bottom-receive .bottom-receive-title2{
				position: relative;
				color: #ffffff;
				width: 100%;
				left: 65px;
				margin-top: 10px;
			}
			.mui-popover.mui-bar-nav.qrcode-position{
			    left: 10%!important;
   				width: 80%!important;
			}
			.act-popover .mui-popover-arrow.mui-bottom {
			    left: 200px!important;
			}
			.act-top-popover {
				top: 73px!important;
			}
			.act-top-popover .mui-popover-arrow {
				left: 185px!important;
			}
		</style>
		<script src="mui.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$('.bottom-button2').css('margin-top', $(document.body).height() * 0.5);// 让领取按钮显示在手的上面
				$(".bottom-button2").on("click",function () {
					var self = this;
					$(self).css("display","none");
					$(".bottom-receive").css("display","block");//显示div
					$(".bottom-receive").animate({
						opacity:'1',
						height:'600px',
						width:'300px'
					}, 1500);
				})
			})
		</script>
	</head>

	<body>
		<div style="background-image: url(r-background.png);width: 100%;height:100%;background-size: 100% 100%!important;overflow:hidden;">
			<div class="bottom-button2"></div>
			<div class="bottom-receive">
				<div class="bottom-receive-money">100元</div>
				<div class="bottom-receive-title1">
					活动名称:<br>双十一领红活动
				</div>
				<div class="bottom-receive-title2">
					活动时间:<br>2021-11-10至2021-11-11
				</div>
			</div>
		</div>
	</body>
</html>