新年抢红包效果(New Year Red Packet)

晓娜的文章(微信公众号:migufe)

2016即将过去,我们将迎来新的一年2017,这里小编提前祝大家新年快乐!万事如意!那我们新年最开心的事是什么呢,没错,我想要说的就是“抢红包”,家人群,朋友群,同事群,新年如果不抢几个红包,那真是好像失去了天大的乐趣。

下面我就分享一个简单的拆红包特效,最终结果就是下图:

代码实现:

HTML代码部分

HTML代码比较简单,短短几行代码就全部可以搞定。

CSS代码部分

因为本身红包就图个喜庆,颜色肯定是红色调为主,里面也没有难懂的标签需要解释,相信大家都可以看的懂哈。

JS代码部分

JS代码也都是简单易懂的代码且每行都有注释供大家参考,所以全民为乐的抢红包,代码还是很接地气儿的。

一个案例(微信扫码观看)

备注

晃动的样式引用的是一个抖动样式库csshake.min.css,

地址是:http://pan.baidu.com/s/1kVPnT6v

大家可以自行下载哈。

后言

以上就是此案例所有的代码啦,新年你最想要什么礼物呢?赶紧动动小手,把“获得iPhone 7 128g手机一部”改成您最喜欢的礼物就OK啦,有木有觉得很简单哇,最后小编再次祝您:新的一年祝您财运亨通!身体健康!阖家欢乐!

新年抢红包效果(New Year Red Packet)的更多相关文章

  1. NOJ 1651 Red packet(二分)

    [1651] Red packet 时间限制: 1000 ms 内存限制: 65535 K 问题描述 New Year is coming! Our big boss Wine93 will dist ...

  2. NBUT 1651 - Red packet (求运气王的钱数)(二分法)

    Description New Year is coming! Our big boss Wine93 will distribute some “Red Package”, just like Al ...

  3. 一步一步实现iOS微信自动抢红包

    微信红包 前言:最近笔者在研究iOS逆向工程,顺便拿微信来练手,在非越狱手机上实现了微信自动抢红包的功能.   此教程所需要的工具/文件 yololib class-dump dumpdecrypte ...

  4. iOS微信自动抢红包插件(支持后台和锁屏下抢红包)

    前言:本文主要讲述使用hook方式实现红包插件,涉及到tweak相关知识,如果你不想了解具体实现细节可直接到我的Github地址参考安装(包含越狱和非越狱两种方法)   转眼间2017即将过去,又到了 ...

  5. 一步一步实现iOS微信自己主动抢红包(非越狱)

    前言:近期笔者在研究iOS逆向project,顺便拿微信来练手,在非越狱手机上实现了微信自己主动抢红包的功能. 题外话:此教程是一篇严肃的学术探讨类文章,只用于学习研究,也请读者不要用于商业或其它非法 ...

  6. sublime text3的一些插件安装方法和使用

    sublime text部分插件使用方法在线安装package Control的方法:    ctrl+~ 输入如下代码:        import urllib2,os; pf='Package ...

  7. WPF 3D 知识点大全以及实例

    引言 现在物联网概念这么火,如果监控的信息能够实时在手机的客服端中以3D形式展示给我们,那种体验大家可以发挥自己的想象. 那生活中我们还有很多地方用到这些,如上图所示的Kinect 在医疗上的应用,当 ...

  8. struts标签<logic:iterate>的用法

    <logic:iterate>主要用来处理在页面上输出集合类,集合一般来说是下列之一: 1. java对象的数组 2. ArrayList.Vector.HashMap等 具体用法请参考s ...

  9. DIV 垂直 垂直水平 居中

    DIV 垂直 居中 让div居中对齐 使用margin-left:auto;margin-right:auto; 可以让你的div居中对齐.  .style{margin-left:auto;marg ...

随机推荐

  1. TypeScript: Angular 2 的秘密武器(译)

    本文整理自Dan Wahlin在ng-conf上的talk.原视频地址: https://www.youtube.com/watch?v=e3djIqAGqZo 开场白 开场白主要分为三部分: 感谢了 ...

  2. BZOJ 1911: [Apio2010]特别行动队 [斜率优化DP]

    1911: [Apio2010]特别行动队 Time Limit: 4 Sec  Memory Limit: 64 MBSubmit: 4142  Solved: 1964[Submit][Statu ...

  3. HTML渲染过程详解

    无意中看到寒冬关于前端的九个问题,细细想来我也只是对第一.二.九问有所了解,正好也趁着这个机会梳理一下自己的知识体系.由于本人对http协议以及dns对url的解析问题并不了解,所以这里之探讨url请 ...

  4. 百度 flash html5自切换 多文件异步上传控件webuploader基本用法

    双核浏览器下在chrome内核中使用uploadify总有302问题,也不知道如何修复,之所以喜欢360浏览器是因为帮客户控制渲染内核: 若页面需默认用极速核,增加标签:<meta name=& ...

  5. javascript之Object.defineProperty的奥妙

    直切主题 今天遇到一个这样的功能: 写一个函数,该函数传递两个参数,第一个参数为返回对象的总数据量,第二个参数为初始化对象的数据.如: var o = obj (4, {name: 'xu', age ...

  6. Android Studio分类整理res/Layout中的布局文件(创建子目录)

    res/layout中的布局文件太杂,没有层次感,受不了的我治好想办法解决这个问题. 前几天看博客说可以使用插件分组,可惜我没找到.知道看到另一篇博客时,才知道这个方法不能用了. 不能用插件,那就手动 ...

  7. 记:MySQL 5.7.3.0 安装 全程截图

    前言: 下一个班快讲MySQL数据库了,正好把服务器里面的MySQL卸了重装了一下. 截个图,作为笔记.也正好留给需要的朋友们. 目录: 下载软件 运行安装程序 安装程序欢迎界面 许可协议 查找更新 ...

  8. Javascript实践技巧

    最近辞职了,准备北上.期待有个好结果~   本文以<Javascript高级程序设计>为基础,结合自身经验来总结下Javascript实际工作方面的知识.   一.可维护性 1.代码约定 ...

  9. React单元测试——十八般兵器齐上阵,环境构建篇

    一个完整.优秀的项目往往离不开单元测试的环节,就 github 上的主流前端项目而言,基本都有相应的单元测试模块. 就 React 的项目来说,一套完整的单元测试能在在后续迭代更新中回归错误时候给与警 ...

  10. (原创) alljoyn物联网实验之手机局域网控制设备

    AllJoyn开源物联网协议框架,官方描述是一个能够使连接设备之间进行互操作的通用软件框架和系统服务核心集,也是一个跨制造商来创建动态近端网络的软件应用.高通已经将该项目捐赠给了一个名为“AllSee ...