<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Jquery & CSS3 background</title> <style type="text/css"> body, html { background: #007bff; height: 100%; margin:0; } h1 { height: auto; display: table; width: 80%; text-align: center; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; color: white; font-family: 'Raleway', sans-serif; font-weight: 300; font-size: 3em; } </style> </head> <body> <link href='http://fonts.googleapis.com/css?family=Raleway:300' rel='stylesheet' type='text/css'> <h1>Jquery & CSS3 background</h1> <script src="http://cdn.bootcss.com/jquery/2.2.0/jquery.js"></script> <script src='http://ricostacruz.com/jquery.transit/jquery.transit.min.js'></script> <script type="text/javascript"> var background = {} background.initializr = function (){ var $this = this; //option $this.id = "background_css3"; $this.style = {bubbles_color:"#fff",stroke_width:0, stroke_color :"black"}; $this.bubbles_number = 30; $this.speed = [1500,8000]; //milliseconds $this.max_bubbles_height = $this.height; $this.shape = false // 1 : circle | 2 : triangle | 3 : rect | false :random if($("#"+$this.id).lenght > 0){ $("#"+$this.id).remove(); } $this.object = $("<div style='z-inde:-1;margin:0;padding:0; overflow:hidden;position:absolute;bottom:0' id='"+$this.id+"'> </div>'").appendTo("body"); $this.ww = $(window).width() $this.wh = $(window).height() $this.width = $this.object.width($this.ww); $this.height = $this.object.height($this.wh); $("body").prepend("<style>.shape_background {transform-origin:center; width:80px; height:80px; background: "+$this.style.bubbles_color+"; position: absolute}</style>"); for (i = 0; i < $this.bubbles_number; i++) { $this.generate_bubbles() } } background.generate_bubbles = function() { var $this = this; var base = $("<div class='shape_background'></div>"); var shape_type = $this.shape ? $this.shape : Math.floor($this.rn(1,3)); if(shape_type == 1) { var bolla = base.css({borderRadius: "50%"}) }else if (shape_type == 2){ var bolla = base.css({width:0, height:0, "border-style":"solid","border-width":"0 40px 69.3px 40px","border-color":"transparent transparent "+$this.style.bubbles_color+" transparent", background:"transparent"}); }else{ var bolla = base; } var rn_size = $this.rn(.8,1.2); bolla.css({"transform":"scale("+rn_size+") rotate("+$this.rn(-360,360)+"deg)", top:$this.wh+100, left:$this.rn(-60, $this.ww+60)}); bolla.appendTo($this.object); bolla.transit({top: $this.rn($this.wh/2,$this.wh/2-60), "transform":"scale("+rn_size+") rotate("+$this.rn(-360,360)+"deg)", opacity: 0},$this.rn($this.speed[0],$this.speed[1]), function(){ $(this).remove(); $this.generate_bubbles(); }) } background.rn = function(from, to, arr) { if(arr){ return Math.random() * (to - from + 1) + from; }else{ return Math.floor(Math.random() * (to - from + 1) + from); } } background.initializr() </script> </body> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » Jquery & CSS3 background 背景 喜欢 (2)or分享 (0)
