div+css+js实现鼠标跟随光线产生影子交互动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css+js实现鼠标跟随光线产生影子交互动画效果代码
代码标签: div css js 鼠标 跟随 光线 产生 影子 交互 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html{ height: 100%; } body{ margin: 0; padding: 0; height: 100%; overflow: hidden; cursor: none; } #canvas{ background-color: #2c343f; width: 100%; height: 100%; } </style> </head> <body> <!-- partial:index.partial.html --> <canvas id="canvas"></canvas> <!-- partial --> <script > var c = document.getElementById("canvas"); var ctx = c.getContext("2d"); function resize() { var box = c.getBoundingClientRect(); c.width = box.width; c.height = box.height; } var light = { x: 160, y: 200 } var colors = ["#f5c156", "#e6616b", "#5cd3ad"]; function drawLight() { ctx.beginPath(); ctx.arc(light.x, light.y, 1000, 0, 2 * Math.PI); var gradient = ctx.createRadialGradient(light.x, light.y, 0, light.x, light.y, 1000); gradient.addColorStop(0, "#3b4654"); gradient.addColorStop(1, "#2c343f"); ctx.fillStyle = gradient; ctx.fill(); ctx.beginPath(); ctx.arc(light.x, light.y, 20, 0, 2 * Math.PI); gradient = ctx.createRadialGradient(light.x, light.y, 0, light.x, light.y, 5); gradient.addColorStop(0, "#fff"); gradient.addColorStop(1, "#3b4654"); ctx.fillStyle = gradient; ctx.fill(); } function Box() { this.half_size = Math.floor((Math.random() * 50) + 1); this.x = Math.floor((Math.random() * c.width) + 1); this.y = Math.floor((Math.random() * c.height) + 1); this.r = Math.random() * Math.PI; this.shadow_length = 2000; this.color = colors[Math.floor((Math.random() * colors.length))]; this.getDots = function() { var full = (Math.PI * 2) / 4; var p1 = { x: this.x + this.half_size * Math.sin(this.r), y: this.y + this.half_size * Math.cos(this.r) }; var p2 = { x: this.x + this.half_size * Math.sin(this.r + full), y: this.y + this.half_size * Math.cos(this.r + full) }; var p3 = { x: this.x + this.half_size * Math.sin(this.r + full * 2), y: this.y + this.half_size * Math.cos(this.r + full * 2) }; var p4 = { x: this.x + this.half_size * Math.sin(this.r + full * 3), y: this.y + this.half_size * Math.cos(this.r + full * 3) }; return { p1: p1, p2: p2, p3: p3, p4: p4 }; } this.rotate = function() { var speed = (60 - this.half_size) / 20; this.r += speed * 0.002; this.x += speed; this.y += speed; } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0