【实现微信红包效果】前端CSS实现微信红包打开效果(附源码下载)

news/2024/11/16 4:47:47/

写在前面】上次领了一分钱微信红包后就在想如何实现红包打开翻转效果,微信带来最大的一个里程碑就是红包功能的开发,以至于出现这个现象,一块钱掉地上都不一定有人捡,但是微信群里抢到1分钱还得说一声谢谢老板,更有甚者直呼谢谢老爸。那么今天我就来和大家讲解一下如何实现微信红包翻转效果。

涉及知识点】:CSS动画实现红包翻转效果,CSS如何实现微信红包效果,红包打开效果如何实现,如何实现微信红包页面效果,animation动画实现红包翻开效果。

实现效果】文尾附完整代码包下载链接:
在这里插入图片描述

目录

  • 一、实现过程
    • 1.1设置基础遮罩
    • 1.2设置红包效果
      • A、创建红包基础
      • B、设置中间弧形阴影
    • 1.3添加“開”翻转效果
      • A、创建“開”节点
      • B、设置翻动效果(点击后)
    • 1.4金额展示
  • 二、源码分享
    • 期待您的支持
    • 百度网盘分享
    • 123云盘分享(下载不限速)

一、实现过程

版权声明:原创于CSDN博主-拄杖盲学轻声码,有疑惑可去留言私信哟!

1.1设置基础遮罩

这个主要是先设置一个dom节点,然后针对dom节点设置背景为透明遮罩,具体设置如下:

background: rgba(0, 0, 0, 0.5);

然后设置宽高都是百分百,就可以得到如下所示页面:
在这里插入图片描述

1.2设置红包效果

A、创建红包基础

基于上面的背景下,在该dom节点下创建一个新的容器,用于存放红包元素,主要设置背景色和边框即可,我们设置一个背景色为红色的方块,如下所示:

在这里插入图片描述

B、设置中间弧形阴影

这个是为了红包效果,我们可以在红色的dom节点里面设置一个200%宽度的节点,然后设置border属性50%,并设置成另一种红色形成一个反差。如下所示:
在这里插入图片描述

1.3添加“開”翻转效果

A、创建“開”节点

此处的dom和上面的浅红色节点是并列的,我设置了相对绝对布局的方式,设置好宽高与偏移。归根到底就是设置一个圆形,背景色为黄色,如下所示设置样式:

.redmid {position: relative;top: -80px;width: 180px;height: 180px;margin: auto;border-radius: 50%;background: #ebcc9d;box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.5);}

设置完成后效果如下所示:
在这里插入图片描述

此时我们得到了一个完整的开始界面,接下来就是动画效果。

B、设置翻动效果(点击后)

此时我主要是用了点击事件onclick和CSS3的animation动画属性及animation-iteration-count动画执行次数属性。
核心实现就是:点击事件后通过js来给dom节点添加动画样式属性。

.redmid.open-anim {animation: 3s open;animation-iteration-count: 2;
}

添加完之后如下所示:
在这里插入图片描述
版权声明:原创于CSDN博主-拄杖盲学轻声码,有疑惑可去留言私信哟!

1.4金额展示

这个其实只要在金色按钮同级目录下我们加一个金额内容展示即可,但是要设置一个展示时间,也就是动画(3s)结束后展示,所以我通过设置点击后的3秒的延迟展示(setTimeout)
代码如下:

setTimeout(function () {$(".redmid").hide();$(".showMon").show(500);}, 3000)

最终文字效果如下:
在这里插入图片描述
完整代码分享见下面章节。

二、源码分享

期待您的支持

希望我写的demo能给您带来启发,如果觉得博主的东西对您有帮助的话,期待您的支持与谅解,童叟无欺,创作不易,欢迎您来打榜!!!皇榜入口点击此处
在这里插入图片描述

百度网盘分享

链接:https://pan.baidu.com/s/1983bkUY8cClm3QblxpmNvA
提取码:hdd6

123云盘分享(下载不限速)

链接:https://www.123pan.com/s/ZxkUVv-55J4.html
提取码:hdd6

期待大家一起进步,有你有我,2023年加油!!!


http://www.ppmy.cn/news/363984.html

相关文章

SQL基础培训16-条件语句

进度17-条件语句-SQL基础培训 知识点: 1、IF条件与Case When的区别 语法 SELECT查询语句 多语句复杂逻辑

代理ip数据采集的优缺点

随着互联网时代的到来,数据已经成为企业发展和决策的关键。但是,不同的网站它对于数据访问的限制和反爬虫措施却是给企业的数据采集带来了挑战。针对这一问题,代理IP数据采集技术应运而生。但是使用代理ip来进行数据采集也有优缺点。 一、代理…

从软件测试到自动化测试,待遇翻倍,我整理的超全学习指南!

因为我最近在分享自动化测试技术,经常被问到: 功能测试想转自动化,请问应该怎么入手?有没有好的资源推荐? 那么,接下来我就结合自己的经历聊一聊我是如何在工作中做自动化测试的。(学习路线和…

北邮通信原理公开课 杨鸿文老师 课程学习笔记【第四课 内积】

1.信号的内积定义: 2.时域内积频域内积 内积为0为正交。时域正交则频域正交 3.信号的能量可理解为信号与其自身的内积 4.帕瑟瓦尔定理:使得能量既可以在频域上计算,也可以在时域上计算 5.互能量:两个信号的内积 6.信号之和的能…

学生通讯管理系统v2.0

首先创建一个python文件 import StudentEntity from DataAccess import* student [] def menu():print("-" * 40)print("欢迎使用学生通讯管理系统v2.0")print("[1] 增加学员信息")print("[2] 删除学员信息")print("[3] 打印学…

【鸿蒙】《校园通》--号码百事通模块

号码百事通 从上一篇博客【鸿蒙】鸿蒙App应用-《校园通》开发步骤中,点击主页面中的号码百事通,进入以下界面,整个界面的显示是由二级列表展示。 1.功能效果展示 2.xml布局搭建 该功能是一个二级列表,但目前鸿蒙系统并没有提供…

校校通项目介绍

一、建设内容 为加快在中小学普及信息技术教育的步伐,2000年10月,教育部在北京召开了"全国中小学信息技术教育工作会议",推出“校校通”项目。明确规定了“校校通”项目的目标是:“用5-10年时间,使全国90%左…

BS1045-基于Android的校园交流信息通讯管理系统

基于Android的校园交流信息通讯管理系统,系统采用多层MVC软件架构,采用Java websocket 通信开发技术实现针对校园内部学生之间的学习资源分享,及时通讯,教学课程小组的建立及管理,实现校园内部快速线上教学&#xff0c…