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

直接上代码：

<!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>

小例子：https://download.csdn.net/download/wodexiaoyang/16682065

实现一个简单的H5领红包的动画相关推荐

基于JavaScript+css写一个简单的h5动态下雨效果
基于JavaScript+css写一个简单的h5动态下雨效果文章目录什么是前端展示效果 JavaScript是什么? 步骤 1.html 2.css 3.js 什么是前端前端它是一个工作,它的 ...
.net工具类分享一个简单的随机分红包的实现方式
废话不多说,直接上代码 /// <summary>/// 分红包/// </summary>public class RandomMoney{public RandomMone ...
php安卓和苹果兼容问题,javascript - 一个简单的H5页面在安卓手机上能跑，在苹果手机上和谷歌浏览器上却出错。...
最近调用百度翻译API做了一个翻译小demo,css方面用了bootstrap,然后自己稍微改了一点样式. js部分很简单,按照百度api文档的规则生成一个 url地址+查询字符串,然后再通过get方 ...
使用现有模板制作一个简单的H5页面
https://blog.csdn.net/yql_617540298/article/details/107677993这里介绍了很多制作H5页面的平台,这次,我打算动手尝试一下,我选择了" ...
抖音/快手自动播放下一个视频，每天领红包，程序员躺平了一样赚钱
你跑的慢,周围到处都是笑声.你跑的快,周围到处都是风声.每个优秀的人都有一段沉默的时光,我们把它叫做扎根-- 前言哈喽,大家好,我是一条. 最近热榜真是越来越卷,都是万字起步,还不一定榜一. 一条今 ...
用ps做一个简单的二维码扫描动画
首先先创建一个页面.然后创建一个扫描的线.主要看图层.然后打开窗口里面的时间轴.然后创建一个帧.然后把图层进行复制.在第二帧上面移动形状1的线.,从上面的顶部移到底部.,点击过渡动画帧.调节过渡次数, ...
html文字简单动画效果,CSS3一个简单的按钮悬停波浪文本动画效果
CSS 语言: CSSSCSS 确定 @import url("https://fonts.googleapis.com/css?family=Roboto:900"); body ...
HTML5+CSS3小实例：简单又好看的加载动画效果
HTML5+CSS3做一个简单又好看的加载动画效果,一个三色圆环转动,再加圆环内部文字转动,效果虽然简单,但第一次看到还是很惊艳的,最主要一点,代码真的超简单的. 效果: 源码: <!DOCTY ...
摸鱼时间做了一个外卖领红包 h5，外卖红包小程序
前段时间天天在抖音刷到 [每天都点外卖,竟然不知道这个隐藏功能] 推广视频,基于程序员明锐的嗅觉,发现里面有利可寻... 于是自己整个了一个简单的美团饿了吗领外卖红包的,在公众号.微信群发了几次,没想 ...

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

实现一个简单的H5领红包的动画相关推荐

最新文章

热门文章