【写在前面】上次领了一分钱微信红包后就在想如何实现红包打开翻转效果,微信带来最大的一个里程碑就是红包功能的开发,以至于出现这个现象,一块钱掉地上都不一定有人捡,但是微信群里抢到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年加油!!!