jQuery新年放鞭炮动画代码

1、新建html文档。

2、准备好需要用到的图标。

3、书写hmtl代码。

<div class="firecrackers"></div>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">

只适用于高版本浏览器，在html中添加一个div并添加一个样式firecrackers即可

jQuery新年放鞭炮动画代码

</div>

4、书写css代码。

* { margin: 0; padding: 0; border: 0; list-style: none; border-collapse: collapse; }

.scale0_7 { position: absolute; right: -230px; bottom: -190px; -webkit-transform: scale(0.7); transform: scale(0.7); -webkit-transform-origin: center bottom; transform-origin: center bottom; }

.bp-line { pointer-events: none; z-index: 1; position: relative; height: 100%; width: 6px; background: url(../images/line.png) repeat-y center; -webkit-transform-origin: center top; transform-origin: center top; -webkit-transition: height 5s linear .5s; -moz-transition: height 5s linear .5s; transition: height 5s linear .5s; }

.bp-line.line-shake { -webkit-ani  mation: lineShake 2s ease-in-out infinite alternate; ani  mation: lineShake 2s ease-in-out infinite alternate; }

.bp-line.hide::after { display: none; }

.bp-line::after { position: absolute; bottom: -17px; margin-left: -12px; width: 30px; height: 34px; content: ""; background: url(../images/huo1.png) no-repeat; -webkit-ani  mation: shining 1.2s cubic-bezier(.14, .43, .87, .56) infinite; ani  mation: shining 1.2s cubic-bezier(.14, .43, .87, .56) infinite; }

.bp { position: relative; width: 30px; height: 60px; font-family: "microsoft yahei"; background: #8f0006;

background: -webkit-linear-gradient(left, #8f0006 0%, #f37c5e 60%, #bf0f1a 100%); 

background: -ms-linear-gradient(left, #8f0006 0%, #f37c5e 60%, #bf0f1a 100%); 

background: linear-gradient(to right, #8f0006 0%, #f37c5e 60%, #bf0f1a 100%);}

.bp-left, .bp-left .bp { -webkit-transform-origin: 100% -10%; -moz-transform-origin: 100% -10%; transform-origin: 100% -10%; }

.bp-right, .bp-right .bp { -webkit-transform-origin: 0 -10%; -moz-transform-origin: 0 -10%; transform-origin: 0 -10%; }

.bp-left, .bp-right { position: absolute; -webkit-ani  mation: 2s ease-in-out infinite alternate; ani  mation: 2s ease-in-out infinite alternate; }

.bg-ani-name1 { -webkit-ani  mation-name: shake1; ani  mation-name: shake1; }

.bg-ani-name2 { -webkit-ani  mation-name: shake2; ani  mation-name: shake2; }

.bg-delay0 { -webkit-ani  mation-duration: 1.5s; ani  mation-duration: 1.5s; }

.bg-delay1 { -webkit-ani  mation-duration: 1.6s; ani  mation-duration: 1.6s; }

.bg-delay2 { -webkit-ani  mation-duration: 1.7s; ani  mation-duration: 1.7s; }

.bg-delay3 { -webkit-ani  mation-duration: 1.8s; ani  mation-duration: 1.8s; }

.bg-delay4 { -webkit-ani  mation-duration: 1.9s; ani  mation-duration: 1.9s; }

.bg-delay5 { -webkit-ani  mation-duration: 2s; ani  mation-duration: 2s; }

5、书写并添加js代码。

<script src="js/jquery.min.js"></script>

<script src="js/bianpao.js"></script>

6、代码整体结构。

7、查看效果。