1、新建html文档。
2、准备好需要用到的图标。
3、书写hmtl代艨位雅剖码。<div class="firecrackers">稆糨孝汶;</div><div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"><p>只适用于高版本浏览器，在html中添加一个div并添加一个样式firecrackers即可</p><p>jQuery新年放鞭炮动画代码</p></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、查看效果。
