微信红包曾经引爆过一系列的营销热潮，相信大家对于这种红包形式并不陌生，这里本着娱乐至上的精神用React简单地实现了拆红包的动画效果，供大家一起交流学习

用CSS3绘制红包

.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);

}

用React来区分不同的状态的转换

用React.js来实现的话，主要通过判断state来控制红包现在是等待拆开还是已经拆开过，具体的代码如下

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 (

奖励

点击下方按钮领取红包

恭喜发财大吉大利

onClick={this.openRedPacket.bind(this)}

拆红包

);

} else if (bonus == 0) {

// 谢谢参与

return (

谢谢参与

多多参与的奖励的机会更多哦

style={{cursor:'pointer',textDecoration: 'underline', color: 'white'}}>

去我的账户查看

);

} else {

// 显示奖励金额

return (

{bonus.toFixed(2)}

奖励积分已经存入您的账户

style={{textDecoration: 'underline'}}>

去我的账户查看积分

);

}

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;

css 微信红包,用React加CSS3实现微信拆红包动画相关推荐

html微信拆红包,用React加CSS3实现微信拆红包动画_html/css_WEB-ITnose
微信红包曾经引爆过一系列的营销热潮,相信大家对于这种红包形式,这里本着娱乐至上的精神用React简单地实现了拆红包的动画效果,供大家一起交流学习用CSS3绘制红包 .redpack { height ...
html微信拆红包动画特效,实例详解用React加CSS3实现微信拆红包动画效果
本文主要介绍了用React加CSS3实现微信拆红包动画效果,微信红包曾经引爆过一系列的营销热潮,相信大家对于这种红包形式并不陌生,这里本着娱乐至上的精神用React简单地实现了拆红包的动画效果,希望能 ...
html仿微信拆红包效果旋转,利用React加CSS3实现微信拆红包动画效果实例（代码）...
本篇文章主要介绍了利用React加CSS3实现微信拆红包动画效果实例(代码),具有一定的参考价值,感兴趣的小伙伴们可以参考一下. 微信红包曾经引爆过一系列的营销热潮,相信大家对于这种红包形式并不陌生, ...
拆红包动态效果html5,用React加CSS3实现微信拆红包动画效果
微信红包曾经引爆过一系列的营销热潮,相信大家对于这种红包形式并不陌生,这里本着娱乐至上的精神用React简单地实现了拆红包的动画效果,供大家一起交流学习用CSS3绘制红包 .redpack { he ...
html css齿轮滚动特效,CSS_纯CSS3实现滚动的齿轮动画效果，纯CSS写的齿轮效果。支持chrome - phpStudy...
齿轮 html,body{margin:0;padding:0;width:100%;} #wrap{margin:0;padding:150px;} .post{width:100px;height ...
微信小程序，Eror代码包大小为12497kb,上限为 2048 kb,请删除文件后重试？微信小程序分包加载
微信小程序如何解决预览超过2M的问题?微信小程序分包加载在微信小程序开发过程中有个问题让人很头疼,就是预览的项目不能超过2M,我们的项目通常都会超过这个大小限制.那到底怎么解决呢?其实官方给出了解决 ...
电商宝SCRM/微信个人号管家v1.1.0成功发布，支持个人号红包收发/批量加好友！...
电商宝SCRM/微信个人号管家是基于微信生态的社交营销管理系统,旨在帮助商家打造微信私域流量池,精细化营销助力社交电商. 经过电商宝各位同学一周的努力,电商宝SCRM/微信个人号管家V1.1.0版本正 ...
朋友圈点赞发红包视频的播放Pc端微信加群app端微信加群测试用例的设计点
1.朋友圈点赞用例的设计点功能 (1)点赞是否实时显示结果 (2)点赞后显示的是否是自己的昵称 (3)点赞后是否可以取消 (4)取消后,重新点赞 (5)点赞后,其他共同好友点赞,是否有消息提醒 (6 ...
纯css和html光芒特效,纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
html代码 html代码结构很简单,跟之前那篇文章使用的相同: 复制代码代码如下: webhek 最外面的div作为父元素,它的position是relative,有固定的高和宽度,有两个子元素:一 ...

css 微信红包,用React加CSS3实现微信拆红包动画

奖励

谢谢参与

{bonus.toFixed(2)}

css 微信红包,用React加CSS3实现微信拆红包动画相关推荐

最新文章

热门文章