Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
Jquery & CSS3 background
css
body, html { background: #007bff; height: 100%;overflow: hidden } 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; }
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 = $("
'").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(""); for (i = 0; i < $this.bubbles_number; i++) { $this.generate_bubbles() } } background.generate_bubbles = function() { var $this = this; var base = $("
"); 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()
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery & CSS3动画背景-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号