当前位置:   article > 正文

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

css红包翻开效果

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

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

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

一、实现过程

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

1.1设置基础遮罩

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

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

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

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);
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

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

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

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

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

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

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

1.4金额展示

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

setTimeout(function () {
      $(".redmid").hide();
      $(".showMon").show(500);
    }, 3000)
  • 1
  • 2
  • 3
  • 4

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

二、源码分享

期待您的支持

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

百度网盘分享

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

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

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

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/AllinToyou/article/detail/403770
推荐阅读
相关标签
  

闽ICP备14008679号