新年抢红包效果(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. 23种设计模式--中介者模式-Mediator Pattern

    一.中介者模式的介绍     中介者模式第一下想到的就是中介,房子中介,婚姻中介啊等等,当然笔者也希望来个婚姻中介给我介绍一个哈哈哈,,回归正题中介者模式分成中介者类和用户类,根据接口编程的方式我们再 ...

  2. C#多线程之线程池篇1

    在C#多线程之线程池篇中,我们将学习多线程访问共享资源的一些通用的技术,我们将学习到以下知识点: 在线程池中调用委托 在线程池中执行异步操作 线程池和并行度 实现取消选项 使用等待句柄和超时 使用计时 ...

  3. spring源码分析之<context:property-placeholder/>和<property-override/>

    在一个spring xml配置文件中,NamespaceHandler是DefaultBeanDefinitionDocumentReader用来处理自定义命名空间的基础接口.其层次结构如下: < ...

  4. canvas与html5实现视频截图功能

    这段时间一直在研究canvas,突发奇想想做一个可以截屏视频的功能,然后把图片拉去做表情包,哈哈哈哈哈哈~~ 制作方法: 1.在页面中加载视频 在使用canvas制作这个截图功能时,首先必须保证页面上 ...

  5. Python爬虫小白入门(四)PhatomJS+Selenium第一篇

    一.前言 在上一篇博文中,我们的爬虫面临着一个问题,在爬取Unsplash网站的时候,由于网站是下拉刷新,并没有分页.所以不能够通过页码获取页面的url来分别发送网络请求.我也尝试了其他方式,比如下拉 ...

  6. ASP.NET中画图形验证码

    context.Response.ContentType = "image/jpeg"; //生成随机的中文验证码 string yzm = "人口手大小多少上中下男女天 ...

  7. MongoDB学习笔记六—查询下

    查询内嵌文档 数据准备 > db.blog.find().pretty() { "_id" : ObjectId("585694e4c5b0525a48a441b5 ...

  8. 学习笔记 :DrawText

    最近在做一个TStringGrid的自绘处理,在画文字处理上遇到了高度的计算问题.后来经过一段时间还是找到了一些方法: 1.使用TLabel 这个方法是有点绕路的,方法倒是简单,就是使用AutoSiz ...

  9. 学习笔记:发现一个IE版本判断的好方法

    web开发就不得不面对浏览器兼容性问题,特别是IE的兼容问题.在前端代码中经常要处理一些兼容格式,为了解决这个问题网上找了找识别浏览器版本的方法.   常规js方法 找到一个方法,还不错,可以识别出各 ...

  10. mono3.2.3+Jexus5.5+openSuSE13.1的asp.net

    读书的时候,我似乎有系统地学习过asp.net,但是基本已经还掉了...工作之后有做过一个内部用的网站,但也没有正式使用,的确只能算是个课程设计型的东西,不能做产品.后来工作需求是做Win8下的APP ...