canvas圆圈连线背景动画效果代码

代码语言:html

所属分类:动画

代码描述:canvas圆圈连线背景动画效果代码

代码标签: canvas 圆圈 连线 背景 动画

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html>
<head>
<meta charset="utf-8">

<style>html,body{overflow:hidden;height:100%;width:100%;background:#262b2e}#wrapper{height:100%;width:100%;text-align:center;display:table;position:absolute;}#title{display:table-cell;vertical-align:middle;z-index:999;}#title h2{color:#fff;font-size:45px;font-family:"museo-slab";}#title h3{color:#fff;font-size:25px;font-family:"museo-sans";font-weight:300}#wrapper canvas{position:absolute;top:0;left:0;width:100%;}#canvas{z-index:1;}#canvasbg{z-index:-10;-webkit-filter:blur(3px);-moz-filter:blur(3px);-o-filter:blur(3px);filter:blur(3px);opacity:0.6;}</style>
</head>
<body>
<div id="wrapper">
<canvas id="canvas" width="1950px" height="800px"></canvas>
<canvas id="canvasbg" width="1950px" height="800px"></canvas>
</div>
<script>
    var radMin = 5,
    radMax = 125,
    filledCircle = 60,
    concentricCircle = 30,
    radThreshold = 25;
var speedMin = 0.3,
    speedMax = 2.5;
var maxOpacity = 0.6;
var colors = ['52,168,83', '117,95,147', '199,108,23', '194,62,55', '0,172,212', '120,120,120'],
    bgColors = ['5.........完整代码请登录后点击上方下载按钮下载查看

网友评论0