效果图：
请关注微信公众号 何问起 , 账号ihewenqi ,或者微信扫描下图二维码：
关注后发送 愚人节 ，或 微信节日红包 ，可以体验效果。
代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no"> <title>节日来了发个HTML5红包 - 何问起</title> <meta description="节日来了发个HTML5红包" /> <link rel="stylesheet" href="http://hovertree.com/wx/hwq/6/fake.css"> <script type="text/javascript" src="http://hovertree.com/ziyuan/jquery/jquery-1.12.1.min.js"></script> <style type="text/css"> .body { min-height: 100%; } .body::after { background: #000 url(http://hovertree.com/wx/hwq/6/bg.jpg) no-repeat center center; background-size: 100% auto; } </style> </head> <body> <audio class="audio" src="http://hovertree.com/game/10/res/sounds/woosh2.MP3" preload="auto"></audio> <audio class="audio" src="http://hovertree.com/game/10/res/sounds/woosh2.MP3" preload="auto"></audio> <audio class="audio" src="http://hovertree.com/game/10/res/sounds/hovertreelaugh.MP3" preload="auto"></audio> <div class="body"> <div class="crush"></div> <dl class="main"> <dt>你有一个红包请注意查收.</dt> <dd><img src="http://hovertree.com/wx/hwq/6/packet.png" /></dd> </dl> </div> <input type="hidden" id="urltype" value="1" /> <input type="hidden" id="followurl" value="" /> <script src="http://hovertree.com/wx/hwq/6/hovertreered.js"></script> </body> </html>
转自：http://hovertree.com/h/bjaf/mcpnogp6.htm
HTML5题目:http://hovertree.com/tiku/bjaf/ufvyaxfv.htm
web前端汇总:http://www.cnblogs.com/jihua/p/webfront.html
原文：http://www.cnblogs.com/jihua/p/redpackets.html