用React加CSS3实现微信拆红包动画效果


Posted in HTML / CSS onMarch 13, 2017

微信红包曾经引爆过一系列的营销热潮,相信大家对于这种红包形式并不陌生,这里本着娱乐至上的精神用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);
}
<div class='redpack'>
  <!--  红包的顶部盖子 -->
  <div class="topcontent"></div>
  <!-- 拆红包的按钮 -->
  <div id="redpack-open"></div>
</div>

效果如图:

用React加CSS3实现微信拆红包动画效果

用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 (
                <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_3water.rar

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
css3中新增的样式使用示例附效果图
Aug 19 HTML / CSS
纯css3实现效果超级炫的checkbox复选框和radio单选框
Sep 01 HTML / CSS
使用CSS3制作饼状旋转载入效果的实例
Jun 23 HTML / CSS
CSS3按钮鼠标悬浮实现光圈效果源码
Sep 11 HTML / CSS
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
Jan 12 HTML / CSS
纯CSS3大转盘抽奖示例代码(响应式、可配置)
Jan 13 HTML / CSS
详解利用css3的var()实现运行时改变scss的变量值
Mar 02 HTML / CSS
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
Jan 06 HTML / CSS
五个2015 年最佳HTML5 框架
Nov 11 HTML / CSS
Html5与App的通讯方式详解
Oct 24 HTML / CSS
CSS极坐标的实例代码
Jun 03 HTML / CSS
CSS list-style-type属性使用方法
May 21 HTML / CSS
css3类选择器之结合元素选择器和多类选择器用法
Mar 09 #HTML / CSS
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
Mar 02 #HTML / CSS
CSS3实现点击放大的动画实例代码
Feb 27 #HTML / CSS
利用纯CSS3实现动态的自行车特效源码
Jan 20 #HTML / CSS
css3加js做一个简单的3D行星运转效果实例代码
Jan 18 #HTML / CSS
纯CSS3实现扇形动画菜单(简化版)实例源码
Jan 17 #HTML / CSS
纯CSS3大转盘抽奖示例代码(响应式、可配置)
Jan 13 #HTML / CSS
You might like
PHP中的加密功能
2006/10/09 PHP
PHP中利用substr_replace将指定两位置之间的字符替换为*号
2011/01/27 PHP
php+highchats生成动态统计图
2014/05/21 PHP
解决PhpStorm64不能启动的问题
2020/06/20 PHP
IE6图片加载的一个BUG解决方法
2010/07/13 Javascript
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
2012/06/14 Javascript
js导入导出excel(实例代码)
2013/11/25 Javascript
使用JS取得焦点(focus)元素代码
2014/03/22 Javascript
JS实现点击按钮后框架内载入不同网页的方法
2015/05/05 Javascript
javascript实现信息增删改查的方法
2015/07/25 Javascript
Javascript中的迭代、归并方法详解
2016/06/14 Javascript
详解JS去重及字符串奇数位小写转大写
2016/12/29 Javascript
nodejs+express实现文件上传下载管理网站
2017/03/15 NodeJs
解决vue-cli + webpack 新建项目出错的问题
2018/03/20 Javascript
详解微信小程序之scroll-view的flex布局问题
2019/01/16 Javascript
jQuery无冲突模式详解
2019/01/17 jQuery
vue+iview分页组件的封装
2020/11/17 Vue.js
[49:07]VGJ.T vs Optic Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
使用Python生成随机密码的示例分享
2016/02/18 Python
Python 多线程的实例详解
2017/09/07 Python
TensorFlow tf.nn.conv2d_transpose是怎样实现反卷积的
2020/04/20 Python
python爬虫利器之requests库的用法(超全面的爬取网页案例)
2020/12/17 Python
使用css3实现的windows8开机加载动画
2014/12/09 HTML / CSS
css3实现简单的白云飘动背景特效
2020/10/28 HTML / CSS
html5指南-1.html5全局属性(html5 global attributes)深入理解
2013/01/07 HTML / CSS
吃透移动端 1px的具体用法
2019/12/16 HTML / CSS
美国室内和室外装饰花盆购物网站:ePlanters
2019/03/22 全球购物
为女性购买传统的印度服装和婚纱:Kalkifashion
2019/07/22 全球购物
什么是岗位职责
2013/11/12 职场文书
业务总经理岗位职责
2014/02/03 职场文书
优秀学生党员先进事迹材料
2014/05/29 职场文书
多媒体编辑专业毕业生求职信
2014/06/13 职场文书
2014年人民调解工作总结
2014/12/08 职场文书
2015年妇幼保健工作总结
2015/05/19 职场文书
任命书格式范文
2015/09/22 职场文书
python 自动化偷懒的四个实用操作
2021/04/11 Python