在寻找自己需要的东西的时候不小心找到了这个有意思的东西,留个纪念原文网址 1 <html lang="en"><head> 2 <meta charset="UTF-8"> 3 <titl ...
在寻找自己需要的东西的时候不小心找到了这个有意思的东西,留个纪念原文网址
1 <html lang="en"><head> 2 <meta charset="UTF-8"> 3 <title>水泡冒泡特效</title> 4 <link href="base.css" type="text/css" rel="stylesheet"> 5 </head> 6 <body> 7 8 <div class="container"> 9 <div class="pao">10 </div>11 </div>12 13 <script type="text/javascript" src='/images/loading.gif' data-original="jquery-1.7.2.min.js"></script>14 <script type="text/javascript">15 $(function(){16 paopao();17 });18 //需要的参数19 var pp = {20 pl : 0, //生成的paopao随机的居左的位置21 color : ["ce4f6d","ca4fce","4f82ce","4fce91","ceca4f"], //随机添加的颜色22 c : 0, //初始化颜色23 step : 300024 };25 function paopao(){26 //添加元素27 var html = '<div background-color: #f5f5f5; color: #000000">'+ pp.pl + 'px;color: #'+ pp.color[pp.c] +'"></div>';28 $(".pao").append(html);29 30 //获取颜色31 pp.c ++;32 if(pp.c >= pp.color.length){33 pp.c = 0;34 }35 36 pp.pl = Math.round(Math.random()*100/3); //随机位置37 38 //执行动画39 $(".paopao").each(function () {40 41 if($(this).index()%2 == 0){42 pp.step = 100;43 }else if($(this).index()%3 == 0){44 pp.step = 200;45 }else{46 pp.step = 300;47 }48 49 if (!$(this).is(":animated")) {50 $(this).animate({ //运动51 top: "-300px",52 fontSize: "60px",53 opacity: "0"54 }, (500-pp.step)*10,55 function () {56 $(this).remove(); //清除元素57 })58 }59 });60 //定时器61 setTimeout(paopao,pp.step);62 }63 64 </script>65 66 </body></html>
Html
1 @charset "utf-8"; 2 3 html,body,div{ 4 margin:0; 5 padding: 0; 6 } 7 @font-face { 8 font-family: 'iconfont'; /* project id 198719 */ 9 src: url('t/font_u8lcaa5uh625u3di.eot');10 src: url('t/font_u8lcaa5uh625u3di.eot?#iefix') format('embedded-opentype'),11 url('t/font_u8lcaa5uh625u3di.woff') format('woff'),12 url('t/font_u8lcaa5uh625u3di.ttf') format('truetype'),13 url('t/font_u8lcaa5uh625u3di.svg#iconfont') format('svg');14 }15 .iconfont{16 font-family:"iconfont" !important;17 font-size:32px;18 font-style:normal;19 -webkit-font-smoothing: antialiased;20 -webkit-text-stroke-width: 0.2px;21 -moz-osx-font-smoothing: grayscale;22 }23 .container{24 width: 200px;25 height: 400px;26 background-color: #000000;27 margin:0 auto;28 position: relative;29 }30 .pao{31 width: 61px;32 height: 68px;33 position: absolute;34 background: url("icon-pao.png") center no-repeat;35 background-size: cover;36 bottom:0;37 left:70px;38 }39 .paopao{40 font-size:32px;41 position: absolute;42 top:-32px;43 }
CSS样式
原标题:jQuery彩色的爱心冒泡动画特效
关键词:jquery
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。