canvas黑洞吸引周边粒子动画效果代码
代码语言:html
所属分类:粒子
代码描述:canvas黑洞吸引周边粒子动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=Arvo:700"); body { font-family: "Arvo", serif; background: black;} body:after { content: "black hole"; position: absolute; color: rgba(255, 255, 255, 0.1); z-index: 2; -webkit-transform: rotate(90deg) translateX(-18vh); transform: rotate(90deg) translateX(-18vh); -webkit-transform-origin: 0% 100%; transform-origin: 0% 100%; white-space: nowrap; top: 0; left: 0; font-size: 18vh;} svg { position: absolute;} </style> </head> <body> <script> console.clear(); let screenWidth, screenHeight, smallerSize; const Z_RANGE = 100; // How deep is your love const Z_VELOCITY = -0.0025; // How fast const STARS_COUNT = 2000; // How many const setSizes = () => { screenWidth = window.innerWidth; screenHeight = window.innerHeight; smallerSize = screenWidth > screenHeight ? screenHeight : screenWidth; } setSizes(); const HOLE = { x: screenWidth / 2, y: screenHeight / 2, r: smallerSize / 4 }; class Star { constructor() { this.reset(); } reset() { this.x = 1 - Math.random() * 2; this.y = 1 - Math.random() * 2; this.z = Math.random() * -Z_RANGE; this.xPos = 0; this.yPos = 0; this.angle = 0.001; }; getPosition() { this.x = this.x * Math.cos(this.angle.........完整代码请登录后点击上方下载按钮下载查看
网友评论0