效果演示：
代码目录：
主要代码实现：
部分CSS样式：
#c {position: absolute;top: calc(50vh - 200px);left: calc(50vw - 200px);}#alpha {position: absolute;top: calc(50vh + 220px);left: calc(50vw - 50px);width: 100px;height: 40px;background-color: #000;border: none;font: 20px Verdana;color: white;text-shadow: 0 0 2px white;cursor: pointer;transition: .4s;}#alpha:focus {outline: none;}#alpha:hover {background-color: #555;}#overlay {position: absolute;width: 400px;height: 400px;top: calc(50vh - 200px);left: calc(50vw - 200px);background-image: radial-gradient(transparent 20%, #111 69%);}
HTML代码 :
<body><canvas id=c></canvas><button id=alpha>alpha</button><div id=overlay></div><script>var w = c.width =h = c.height = 400,ctx = c.getContext('2d'),total = 50,particlesParRow = 10,minValue = 30,updatesBeforeStart = 500,repaintColor = 'rgba(0, 0, 0, .04)',templateColor = 'hsl(hue, 80%, 50%)',particles = [],colors = [],radiants = [],colorPart = 360 / total,radiantPart = Math.PI * 2 / total,alphaValue = true;for (var i = 0; i < total; ++i) {var array = [];particles.push(array);colors.push(templateColor.replace('hue', colorPart * i));radiants.push(radiantPart * i);for (var j = 0; j < particlesParRow; ++j) {array.push(i * minValue);}}for (var i = 0; i < updatesBeforeStart; ++i) update();function anim() {window.requestAnimationFrame(anim);ctx.fillStyle = repaintColor;ctx.beginPath();ctx.arc(w / 2, h / 2, w / 2 + 1, 0, Math.PI * 2);ctx.fill();ctx.closePath();ctx.translate(w / 2, h / 2);ctx.rotate(.006);ctx.translate(-w / 2, -h / 2);for (var i = 0; i < total; ++i) {ctx.fillStyle = colors[i];for (var j = 0; j < particlesParRow; ++j) {var particle = particles[i][j];particles[i][j] -= particle / 70;ctx.beginPath();ctx.arc(w / 2, h / 2, particle, radiants[i], radiants[i] + radiantPart);ctx.arc(w / 2, h / 2, particles[i][j], radiants[i] + radiantPart, radiants[i], true);ctx.closePath();ctx.fill();if (particles[i][j] <= minValue && Math.random() < .1) {particles[i][j] = w / 2;}}}}anim();function update() {for (var i = 0; i < total; ++i) {for (var j = 0; j < particlesParRow; ++j) {var particle = particles[i][j];particles[i][j] -= particle / 70;if (particles[i][j] <= minValue && Math.random() < .1) {particles[i][j] = w / 2;}}}}alpha.addEventListener('click', function() {if (alphaValue) {alphaValue = false;repaintColor = 'black';alpha.textContent = 'solid';} else {alphaValue = true;repaintColor = 'rgba(0, 0, 0, .04)';alpha.textContent = 'alpha';}})</script></body>
源码获取
查看博主主页或私信博主获取
精彩推荐更新中：
HTML5大作业实战100套
打卡 文章 更新39/ 100天
大家可以点赞、收藏、关注、评论我啦 、需要完整文件随时联系我或交流哟~！
