jquery网页木地板背景下雪动画效果

新建html文档。

准备好需要用到的木地板背景。

书写hmtl代码。 

书写css代码。html { color: #000; }*{ margin: 0; padding: 0; }html { background: url(../images/subtle-wood.gif); }.info { font-size: 30px; text-align: center; margin: 100px; }.info a { color: green; } body { color: #333; font: 12px tahoma, arial, \5b8b\4f53; }input, select, textarea { font-size: 100%; }fieldset, img { border: 0; font-family: Tahoma; vertical-align: middle; }button { border: 0; background: transparent; cursor: pointer; }del { text-decoration: line-through; }ins, a { text-decoration: none; }a:hover { text-decoration: underline; }ol, ul { list-style: none; }caption, th { text-align: left; }q:before, q:after { content: ''; }abbr, acronym { border: 0; font-variant: normal; }sup { vertical-align: baseline; }sub { vertical-align: baseline; }legend { color: #000; }.cf:after { visibility: hidden; display: block; font-size: 0; content: ' '; clear: both; height: 0; }.cf { *zoom: 1;}.fl { float: left; }.fr { float: right; }.fl, .fr { _display: inline; }.tl { text-align: left; }.tr { text-align: right; }.tc { text-align: center; }.tip { display: inline-block; margin-left: 10px; line-height: 22px; }.show { display: block; }.hide { display: none; }.inline { display: inline; }.ib { display: inline-block; }#footer { color: #666666; padding-top: 20px; text-align: center; line-height: 30px; }.footer-info { text-align: center; }.footer-info a { color: #666666; }.help-input { border: none; width: 0; height: 0; background: transparent; }

书写并添加js代码。    

代码整体结构。

查看效果。