今天，将与大家分享web前端特效荟萃系列第1期，运用css与js生成炫酷效果——唯美星空效果，相关代码如下：
<html lang="en"><head> <meta charset="UTF-8"> <title>clothtitle> <style> body{ margin:0px; padding:0px; background-color: #111; overflow: hidden;}canvas{ padding:0px; margin: calc(50vh - 600px) calc(50vw - 600px); animation: rot 60s linear infinite;}@keyframes rot { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}style>head> <body> <script> let ctx, thetas = [];const w = 1200, h = 1200, TAU = 2*Math.PI, MAX_R = 600;const mw = parseInt(w/2), mh = parseInt(h/2);const colors = ["#00204a22","#00579222","#00bbf022","#fdb44b22"];function setup(){ let r, canvas = document.createElement('canvas'); canvas.width = w; canvas.height = h; document.body.appendChild(canvas); ctx = canvas.getContext('2d'); for(r = 1; r < MAX_R; r++) thetas[r] = Math.random()*TAU; requestAnimationFrame(draw);}function draw(){ let r, p, x, y; for(r = 1; r < MAX_R; r++){ p = 2*Math.random()*Math.PI/r; thetas[r] += (Math.random() > 0.5) ? p : -p; x = r*Math.cos(thetas[r]); y = r*Math.sin(thetas[r]); ctx.fillStyle = colors[(r) % colors.length]; ctx.beginPath(); ctx.arc(mw + x, mw + y, 2, 0, TAU, true); ctx.arc(mh - x, mh + y, 2, 0, TAU, true); ctx.fill(); } requestAnimationFrame(draw);}window.onload = setup;script>body>html>版权声明：本文为广西大数据公司原创文章，转载请附上原文出处链接及本声明。
1402
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
