用React加CSS3实现微信拆红包动画效果
发布时间:2017-03-13 16:48:00 作者:lionrock 我要评论
本篇文章主要介绍了用React加CSS3实现微信拆红包动画效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
微信红包曾经引爆过一系列的营销热潮,相信大家对于这种红包形式并不陌生,这里本着娱乐至上的精神用React简单地实现了拆红包的动画效果,供大家一起交流学习
用CSS3绘制红包
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | .redpack { height : 450px ; background : #A5423A ; width : 300px ; left : 0 ; top : 0 ; border-radius: 10px ; margin : 0 auto ; } .topcontent { height : 300px ; border : 1px solid #BD503A ; background-color : #BD503A ; border-radius: 10px 10px 50% 50% / 10px 10px 15% 15% ; box-shadow: 0px 4px 0px -1px rgba( 0 , 0 , 0 , 0.2 ); } #redpack-open { width : 100px ; height : 100px ; border : 1px solid #FFA73A ; background-color : #FFA73A ; border-radius: 50% ; color : #fff ; font-size : 20px ; display : inline- block ; margin-top : -50px ; box-shadow: 0px 4px 0px 0px rgba( 0 , 0 , 0 , 0.2 ); } |
1 2 3 4 5 6 | < div class = 'redpack' > <!-- 红包的顶部盖子 --> < div class = "topcontent" ></ div > <!-- 拆红包的按钮 --> < div id = "redpack-open" ></ div > </ div > |
效果如图:
用React来区分不同的状态的转换
用React.js来实现的话,主要通过判断state来控制红包现在是等待拆开还是已经拆开过,具体的代码如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 | import React from 'react' ; class ReadPacket extends React.Component { constructor(props) { super (props); this .state = { animation: false , status: 0 // 0: 等待拆开 1: 拆开后 }; } render() { var bonus = this .props.thanks ? 0 : parseFloat( this .props.surveyInfo.bonus); if ( this .state.status == 0) { return ( <div className= 'redpack-container' id= 'redpack-container' > <div className= 'redpack' > <div className= 'topcontent' > <div id= 'redpack-opened' > <div className= 'redpack-avatar' > <img src= 'http://placehold.it/80x80' alt= '头像' width= '80' height= '80' /> </div> </div> <h2 style={{marginTop: 80, color: 'white' }}>奖励</h2> <span className= 'redpack-text' >点击下方按钮领取红包</span> <div className= 'redpack-description white-text' >恭喜发财 大吉大利</div> </div> <div id= 'redpack-open' className={ this .state.animation ? 'rotate' : '' } onClick={ this .openRedPacket.bind( this )} > <span>拆红包</span> </div> </div> </div> ); } else if (bonus == 0) { // 谢谢参与 return ( <div className= 'redpack-container' id= 'redpack-container' > <div className= 'redpack' > <div className= 'topcontent-open' > <div className= 'redpack-avatar' > <span id= 'close' ></span> </div> <h1 style={{marginTop: 180, color: 'white' }}> 谢谢参与 </h1> <span className= 'redpack-text' >多多参与的奖励的机会更多哦</span> <br/> <a onClick={ this ._toWallet.bind( this )} style={{cursor: 'pointer' ,textDecoration: 'underline' , color: 'white' }}> 去我的账户查看 </a> </div> <div id= 'redpack-opened' > <div className= 'redpack-avatar' > <img src= 'http://placehold.it/80x80' alt= '头像' width= '80' height= '80' /> </div> </div> </div> </div> ); } else { // 显示奖励金额 return ( <div className= 'redpack-container' id= 'redpack-container' > <div className= 'redpack' > <div className= 'topcontent-open' > <div className= 'redpack-avatar' > <span id= 'close' ></span> </div> <h1 className= 'white-text' style={{marginTop: 180}}> {bonus.toFixed(2)} </h1> <span className= 'redpack-text' >奖励积分已经存入您的账户</span> <a className= 'btn-flat white-text' onClick={ this ._toWallet.bind( this )} style={{textDecoration: 'underline' }}> 去我的账户查看积分 </a> </div> <div id= 'redpack-opened' > <div className= 'redpack-avatar' > <img src= 'http://placehold.it/80x80' alt= '头像' width= '80' height= '80' /> </div> </div> </div> </div> ); } } stopAnimation() { this .setState({animation: false }); } showResult() { this .setState({status: 1}); } openRedPacket() { this .setState({animation: true }); setTimeout( this .stopAnimation.bind( this ), 3000); setTimeout( this .showResult.bind( this ), 4000); } _toWallet() { // 跳转到钱包 window.location.hash = '/wallet' ; } } export default ReadPacket; |
demo下载地址:redpacket_jb51.rar
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
16种基于css3 Bootstrap图片hover悬停遮罩效果
bootstrap-image-hover是一款基于Bootstrap的css3图片hover效果。共16种特效遮罩,欢迎下载2017-03-13- CSS3非常可爱的动态表情特效是一款仿Facebook表情包图标动画特效。此段特效源码可以在各大网站使用,有需要的朋友直接下载使用2017-03-13
- 本篇文章主要介绍了纯CSS3实现Material Design效果。是对原生组件基于标签属性做了美化,具有一定的参考价值,有兴趣的可以了解一下。2017-03-09
- 这是一款基于css3实现的响应式网格蜂巢排版样式布局效果源码。界面上呈现出六角形图片紧密排列的蜂巢式布局效果,鼠标悬停于图片上可出现对应的文字动画提示特效2017-03-09
- 这篇文章主要介绍了css3类选择器之结合元素选择器和多类选择器用法,非常不错,具有参考借鉴价值,需要的朋友可以参考下2017-03-09
- 前提是定义了background-image属性,然后用background-attachment来指明背景图的位置是固定于视口的,还是随着包含块移动的。可简单理解为定义背景图片随滚动轴的移动方式2017-03-08
css 背景固定样式background-attachment属性基础
这篇文章主要为大家介绍了在CSS中,使用背景附件属性background-attachment可以设置背景图像是随对象滚动还是固定不动,需要的朋友可以参考下2017-03-08- 这是一款基于纯css3实现的鼠标悬停图片遮罩文字显示动画特效源码。鼠标滑过图片可呈现出带有文字的遮罩层渐显动画效果,随着鼠标离开图片,遮罩层也逐渐消失2017-03-08
- 这是一组使用纯CSS3制作的预加载动画特效代码。共有3种动画效果,分别是翻书效果,摇晃动画和旋转动画,需要的可以下载试试2017-03-07
最新评论