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、查看效果。