canvas圆圈连线背景动画效果代码
代码语言:html
所属分类:动画
代码描述: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