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="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 : 3000
24     };
25     function paopao(){
26         //添加元素
27         var html = '<div class="paopao iconfont" style="left: '+ 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样式

 

posted @ 2017-09-21 15:32  枫叶并红  阅读(992)  评论(2)  编辑  收藏  举报