HTML5 Canvas水波纹气泡特效

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 HTML5 Canvas水波纹气泡特效的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html>
<head>
<meta charset="gb2312">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML5 Canvasˮ����������Ч </title>
<link href="css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>

<body style="background:#dedede;">

<div class="container" style="margin:150px auto;">
<div class="row">
<div class=" col-lg-4">
<canvas id="demo-1" style="demo"></canvas>
</div>
<div class=" col-lg-4">
<canvas id="demo-2" style="demo"></canvas>
</div>
<div class=" col-lg-4">
<canvas id="demo-3" style="demo"></canvas>
</div>
</div>
</div>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/waterbubble.js"></script>
<script>
$('#demo-1').waterbubble({txt: 'Default',});
$('#demo-2').waterbubble({waterColor: 'rgba(0, 0, 0, 1)',txt: 'jQuery'});
$('#demo-3').waterbubble({txt: '50%',});
</script>
</body>
</html>

CSS代码(jquerysctipttop.css):

#jquery-script-menu{position:fixed;height:90px;width:100%;top:0;left:0;border-top:5px solid #316594;background:#fff;-moz-box-shadow:0 2px 3px 0px rgba(0,0,0,0.16);-webkit-box-shadow:0 2px 3px 0px rgba(0,0,0,0.16);box-shadow:0 2px 3px 0px rgba(0,0,0,0.16);z-index:999999;padding:10px 0;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;}
.jquery-script-center{width:960px;margin:0 auto;}
.jquery-script-center ul{width:212px;float:left;line-height:45px;margin:0;padding:0;list-style:none;}
.jquery-script-center a{text-decoration:none;}
.jquery-script-ads{width:728px;height:90px;float:right;}
.jquery-script-clear{clear:both;height:0;}

附件:下载该文件资源,减少时间成本(增值服务)