js实现一个冒彩色气泡动画效果代码
代码语言:html
所属分类:动画
代码描述:js实现一个冒彩色气泡动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html> <head> <style> body { overflow: hidden; } canvas { border: 1px solid silver; display: block; z-index: -1; } .gooeys { margin: 0 auto; -webkit-filter: url('#filter'); filter: url('#filter'); } svg { display: none; } .avatar { position: absolute; z-index: 1; box-shadow: inset 0px 0px 20px #888; width: 100px; height: 100px; border-radius: 50%; left: calc(50% - 50px); top: calc(50% - 50px); } </style> </head> <body onresize="resize_canvas()"> <div class="avatar"></div> <svg> <defs> <filter id="filter"> <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"></feGaussianBlur> <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="filter"></feColorMatrix> <feComposite in="SourceGraphic" in2="filter" operator="atop"></feComposite> </filter> </defs> </svg> <canvas class="gooeys" id="canvas" width="701" height="679"></canvas> <script> var utils = { norm: function(value, min, max) { return (value - min) / (max - min); }, lerp: function(norm, min, max) { return (max - min) * norm + min; }, map: function(value, sourceMin, sourceMax, destMin, destMax) { return utils.lerp(utils.norm(value, sourceMin, sourceMax), destMin, destMax); }, clamp: function(value, min, max) { return Math.min(Math.max(value, Math.min(min, max)), Math.max(min, max)); }, distance: function(p0, p1) { var dx = p1.x - p0.x, dy = p1.y - p0.y; return Math.sqrt(dx * dx + dy * dy); }, distanceXY: function(x0, y0, x1, y1) { var dx = x1 - x0, dy = y1 - y0; return Math.sqrt(dx * dx + dy * dy); }, circleCollision: function(c0, c1) { return utils.distance(c0, c1) <= c0.radius + c1.radius; }, circlePointCollision: function(x, y, circle) { return utils.distanceXY(x, y, circle.x, circle.y) < circle.radius; }, pointInRect: function(x, y, rect) { return utils.inRange(x, rect.x, rect.x + rect.radius) && utils.inRange(y, rect.y, rect.y + rect.radius); }, inRange: function(value, min, max) { return value >= Math.min(min, max) && value <= Math.max(min, max); }, rangeIntersect: function(min0, max0, min1, max1) { return Math.max(min0, max0) >= Math.min(min1, max1) && Math.min(min0, max0) <= Math.max(min1, max1); }, rectIntersect: function(r0, r1) { return utils.rangeIntersect(r0.x, r0.x + r0.width, r1.x, r1.x + r1.width) && utils.rangeIntersect(r0.y, r0.y + r0.height, r1.y, r1.y + r1.height); }, degreesToRads: function(degrees) { return degrees / 180 * Math.PI; }, radsToDegrees: function(radians) { return radians * 180 / Math.PI; }, randomRange: function(min, max) { return min + Math.random() * (max - min); }, randomInt: function(min, max) { return min + Math.random() * (max - min + 1); }, getmiddle: function(p0, p1) { var x = p0.x, x2 = p1.x; middlex = (x + x2) / 2; var y = p0.y, y2 = p1.y; middley = (y + y2) / 2; pos = [middlex, middley]; return pos; }, getAngle: function(p0, p1) { var deltaX = p1.x - p0.x; var deltaY = p1.y - p0.y; var rad = Math.atan2(deltaY, deltaX); return rad; }, inpercentW: function(size) { return (size * W) / 100; }, inpercentH: function(size) { return (size * H) / 100; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0