利用CSS+JS实现唯美星空轨迹运动效果

时间：2021-05-08

先给大家分享效果图：

给大家分享一个使用CSS+JS实现的唯美星空轨迹运动效果， 这样的效果不输给Flash 。相关代码如下：

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>cloth</title> <style> body { background: #000; }img { display: block; float: left; margin: 0 1px 0 0;}canvas { background: #131c35 linear-gradient(#192853, #131c35); display: block; float: left; } </style></head><body> <div id="container"></div> <script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script> <canvas id="c"></canvas> <img src="http://dribbble.s3.amazonaws.com/users/36991/screenshots/674715/game.png" /> <script> var c = document.getElementById('c'), ctx = c.getContext('2d'), cw = c.width = 400, ch = c.height = 300, rand = function(a,b){return ~~((Math.random()*(b-a+1))+a);}, dToR = function(degrees){ return degrees * (Math.PI / 180); }, circle = { x: (cw / 2) + 5, y: (ch / 2) + 22, radius: 90, speed: 2, rotation: 0, angleStart: 270, angleEnd: 90, hue: 220, thickness: 18, blur: 25 }, particles = [], particleMax = 100, updateCircle = function(){ if(circle.rotation < 360){ circle.rotation += circle.speed; } else { circle.rotation = 0; } }, renderCircle = function(){ ctx.save(); ctx.translate(circle.x, circle.y); ctx.rotate(dToR(circle.rotation)); ctx.beginPath(); ctx.arc(0, 0, circle.radius, dToR(circle.angleStart), dToR(circle.angleEnd), true); ctx.lineWidth = circle.thickness; ctx.strokeStyle = gradient1; ctx.stroke(); ctx.restore(); }, renderCircleBorder = function(){ ctx.save(); ctx.translate(circle.x, circle.y); ctx.rotate(dToR(circle.rotation)); ctx.beginPath(); ctx.arc(0, 0, circle.radius + (circle.thickness/2), dToR(circle.angleStart), dToR(circle.angleEnd), true); ctx.lineWidth = 2; ctx.strokeStyle = gradient2; ctx.stroke(); ctx.restore(); }, renderCircleFlare = function(){ ctx.save(); ctx.translate(circle.x, circle.y); ctx.rotate(dToR(circle.rotation+185)); ctx.scale(1,1); ctx.beginPath(); ctx.arc(0, circle.radius, 30, 0, Math.PI *2, false); ctx.closePath(); var gradient3 = ctx.createRadialGradient(0, circle.radius, 0, 0, circle.radius, 30); gradient3.addColorStop(0, 'hsla(330, 50%, 50%, .35)'); gradient3.addColorStop(1, 'hsla(330, 50%, 50%, 0)'); ctx.fillStyle = gradient3; ctx.fill(); ctx.restore(); }, renderCircleFlare2 = function(){ ctx.save(); ctx.translate(circle.x, circle.y); ctx.rotate(dToR(circle.rotation+165)); ctx.scale(1.5,1); ctx.beginPath(); ctx.arc(0, circle.radius, 25, 0, Math.PI *2, false); ctx.closePath(); var gradient4 = ctx.createRadialGradient(0, circle.radius, 0, 0, circle.radius, 25); gradient4.addColorStop(0, 'hsla(30, 100%, 50%, .2)'); gradient4.addColorStop(1, 'hsla(30, 100%, 50%, 0)'); ctx.fillStyle = gradient4; ctx.fill(); ctx.restore(); }, createParticles = function(){ if(particles.length < particleMax){ particles.push({ x: (circle.x + circle.radius * Math.cos(dToR(circle.rotation-85))) + (rand(0, circle.thickness*2) - circle.thickness), y: (circle.y + circle.radius * Math.sin(dToR(circle.rotation-85))) + (rand(0, circle.thickness*2) - circle.thickness), vx: (rand(0, 100)-50)/1000, vy: (rand(0, 100)-50)/1000, radius: rand(1, 6)/2, alpha: rand(10, 20)/100 }); } }, updateParticles = function(){ var i = particles.length; while(i--){ var p = particles[i]; p.vx += (rand(0, 100)-50)/750; p.vy += (rand(0, 100)-50)/750; p.x += p.vx; p.y += p.vy; p.alpha -= .01; if(p.alpha < .02){ particles.splice(i, 1) } } }, renderParticles = function(){ var i = particles.length; while(i--){ var p = particles[i]; ctx.beginPath(); ctx.fillRect(p.x, p.y, p.radius, p.radius); ctx.closePath(); ctx.fillStyle = 'hsla(0, 0%, 100%, '+p.alpha+')'; } }, clear = function(){ ctx.globalCompositeOperation = 'destination-out'; ctx.fillStyle = 'rgba(0, 0, 0, .1)'; ctx.fillRect(0, 0, cw, ch); ctx.globalCompositeOperation = 'lighter'; } loop = function(){ clear(); updateCircle(); renderCircle(); renderCircleBorder(); renderCircleFlare(); renderCircleFlare2(); createParticles(); updateParticles(); renderParticles(); }//document.body.appendChild(c);ctx.shadowBlur = circle.blur;ctx.shadowColor = 'hsla('+circle.hue+', 80%, 60%, 1)';ctx.lineCap = 'round'var gradient1 = ctx.createLinearGradient(0, -circle.radius, 0, circle.radius);gradient1.addColorStop(0, 'hsla('+circle.hue+', 60%, 50%, .25)');gradient1.addColorStop(1, 'hsla('+circle.hue+', 60%, 50%, 0)');var gradient2 = ctx.createLinearGradient(0, -circle.radius, 0, circle.radius);gradient2.addColorStop(0, 'hsla('+circle.hue+', 100%, 50%, 0)');gradient2.addColorStop(.1, 'hsla('+circle.hue+', 100%, 100%, .7)');gradient2.addColorStop(1, 'hsla('+circle.hue+', 100%, 50%, 0)');setInterval(loop, 16); </script></body></html> -

在线演示：Here～

以上所述是小编给大家介绍的利用CSS+JS实现唯美星空轨迹运动效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章