HTML5+css3+jq流星雨动画背景特效

1、新建html文档。

2、书写hmtl代码。<canvas id="fullstarbg">你的浏览器不支持canvas标签</canvas><div class="content"><img src="rabit.png" class="rabitBg" /><div class="input_wrap_box box_S"> <div class="input_cover"> <span class="num">关键字</span> <span class="icons">搜索</span> </div> <input type="text" id="sercHead" class="box_S"></div></div>

3、书写css代码。<style>*{ margin:0; padding:0;}canvas撑俯擂摔{ display: block; margin: 0; width:100%; height:100%; position: fixed; left: 0; right: 0; top:0; bottom:0;z-index: -1; }.content{ width: 1144px; margin: 0 auto; padding-top:200px;}.rabitBg{ position:fixed; left:0; top:50%;}.fixedTop { position: fixed; width: 100%; left: 0; top: 0; }.fixedBottom { position: fixed; width: 100%; left: 0; bottom: 0; }.box_S { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }* { margin: 0; padding: 0; outline: none; }body { color: #ffffff; font-size: 14px; font-family: tahoma, "Microsoft YaHei", 'PingFang SC', 'Helvetica Neue', 'Helvetica', 'STHeitiSC-Light', 'Arial', sans-serif; }.bordered { border-bottom: solid 1px #e8e8e8; }.borderTop { border-top: solid 1px #e8e8e8; }.blockMid { display: block; margin: 0 auto; }.prelative { position: relative; }.pabsolute { position: absolute; }.content { padding: 0 4%; }.pright { right: 4%; }.bgcolor { background: #fa5527;}.white { color: #ffffff;}.content { width: 1144px; margin: 0 auto; }.input_wrap_box { background: #0f1034; text-align: center; display: block; margin: 0 auto; border-radius: 25px; -webkit-border-radius: 25px; -moz-border-radius: 25px; width: 770px; height: 50px; line-height: 50px; margin-top: 46px; position: relative; }.input_wrap_box .input_cover { text-align: center; line-height: 48px; width: 100%; position: absolute; left: 0; top: 1px; z-index: 3; background: #0f1034; border-radius: 27px; -webkit-border-radius: 27px; -moz-border-radius: 27px;}.input_wrap_box .input_cover .num { color: #ff0000; }.input_wrap_box .input_cover .icons { color: #9a99a4; padding-left: 10px; }.input_wrap_box #sercHead { background: #0f1034; width: 100%; display: block; text-align: center; line-height: 48px; border: 1px solid #1d2556; border-radius: 25px; -webkit-border-radius: 25px; -moz-border-radius: 25px; color: #ffffff; }.input_wrap_box #sercHead.cur { border: 1px solid #6974b3; }.iconlogo { display: block; margin: 0 auto; padding: 45px 0; }@media screen and (max-width:359px){body{ font-size: 12px;}}@media only screen and (min-width:360px)and(max-width:639px ){ body{ font-size: 13px;}}@media screen and (min-width:640px)and(max-width:749px ){body{ font-size: 16px;}}@media screen and (min-width:750px){body{ font-size: 24px;}}</style>

4、添加引用js<script src="comonjs/jquery-1.11.2.min.js">稆糨孝汶;</script><script src="comonjs/modernizr-2.6.2.min.js"></script><script src="js/starbg.js"></script><script> $(".input_cover").mousedown(function(){ $(this).hide(); $(this).siblings("input").addClass("cur"); $("#sercHead").focus(); return false; }) $("#sercHead").blur(function(){ $(this).removeClass("cur"); if($(this).val()==''){ $(this).siblings(".input_cover").show(); } })</script>

5、代码整体结构。

6、查看效果。