你的位置:首页 > 软件开发 > Java > jQuery彩色的爱心冒泡动画特效

jQuery彩色的爱心冒泡动画特效

发布时间:2017-09-21 16:00:27
在寻找自己需要的东西的时候不小心找到了这个有意思的东西,留个纪念原文网址 1 <html lang="en"><head> 2 <meta charset="UTF-8"> 3 <titl ...

在寻找自己需要的东西的时候不小心找到了这个有意思的东西,留个纪念原文网址 

jQuery彩色的爱心冒泡动画特效jQuery彩色的爱心冒泡动画特效
 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

 

jQuery彩色的爱心冒泡动画特效jQuery彩色的爱心冒泡动画特效
 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 (#换成@)。

可能感兴趣文章

我的浏览记录