用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使用技巧5个
Apr 02 HTML / CSS
CSS3 优势以及网页设计师如何使用CSS3技术
Jul 29 HTML / CSS
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
Feb 04 HTML / CSS
浅析几个CSS3常用功能的写法
Jun 05 HTML / CSS
一款基于css3和jquery实现的动画显示弹出层按钮教程
Jan 04 HTML / CSS
css3实现椭圆轨迹旋转的示例代码
Oct 29 HTML / CSS
CSS3 input框的实现代码类似Google登录的动画效果
Aug 04 HTML / CSS
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
Mar 15 HTML / CSS
html5构建触屏网站之网站尺寸探讨
Jan 07 HTML / CSS
html5贪吃蛇游戏使用63行代码完美实现
Jun 25 HTML / CSS
实例讲解利用HTML5 Canvas API操作图形旋转的方法
Mar 22 HTML / CSS
整理HTML5移动端开发的常用触摸事件
Apr 15 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
SONY SRF-M100的电路分析
2021/03/02 无线电
一个连接两个不同MYSQL数据库的PHP程序
2006/10/09 PHP
php中拷贝构造函数、赋值运算符重载
2012/07/25 PHP
PHP删除数组中特定元素的两种方法
2013/07/02 PHP
php数组删除元素示例
2014/03/21 PHP
PHP准确取得服务器IP地址的方法
2015/06/02 PHP
通过PHP自带的服务器来查看正则匹配结果的方法
2015/12/24 PHP
Zend Framework教程之配置文件application.ini解析
2016/03/10 PHP
php array_values 返回数组的所有值详解及实例
2016/11/12 PHP
PHP fclose函数用法总结
2019/02/15 PHP
JS实现打开本地文件或文件夹
2021/03/09 Javascript
jquery动画2.元素坐标动画效果(创建一个图片走廊)
2012/08/24 Javascript
javascript + jquery实现定时修改文章标题
2014/03/19 Javascript
javascript中href和replace的比较(详解)
2016/11/25 Javascript
微信小程序实现给循环列表添加点击样式实例
2017/04/26 Javascript
使用jQuery.Pin垂直滚动时固定导航
2017/05/24 jQuery
微信小程序 rich-text的使用方法
2017/08/04 Javascript
webpack中使用iconfont字体图标的方法
2018/02/22 Javascript
[42:24]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第三场 11.27
2020/12/01 DOTA
python中Flask框架简单入门实例
2015/03/21 Python
图文讲解选择排序算法的原理及在Python中的实现
2016/05/04 Python
利用Python实现命令行版的火车票查看器
2016/08/05 Python
Python中属性和描述符的正确使用
2016/08/23 Python
Python numpy实现二维数组和一维数组拼接的方法
2018/06/05 Python
python3.6+django2.0+mysql搭建网站过程详解
2019/07/24 Python
python画蝴蝶曲线图的实例
2019/11/21 Python
python3.6连接mysql数据库及增删改查操作详解
2020/02/10 Python
Python气泡提示与标签的实现
2020/04/01 Python
python中的对数log函数表示及用法
2020/12/09 Python
HTML5在a标签内放置块级元素示例代码
2013/08/23 HTML / CSS
Proenza Schouler官方网站:纽约女装和配饰品牌
2019/01/03 全球购物
莫斯科大型旅游休闲商品超市:Camping.ru
2020/09/16 全球购物
简单英文演讲稿
2014/01/01 职场文书
优秀干部获奖感言
2014/01/31 职场文书
员工安全承诺书
2014/05/22 职场文书
2015年社区纪检工作总结
2015/04/21 职场文书