本文主要和大家分享一个使用css+js实现的唯美星空轨迹运动效果，效果非常逼真，下面小编给大家带来了实例代码，需要的朋友参考下，希望能帮助到大家。
先给大家分享效果图：
给大家分享一个使用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;
/* uncomment to test overlay */
/*
position: absolute;
left: 0;
opacity: .5;
top: 0;
*/
}
</style>
</head>
<body>
<p id="container"></p>
<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();
}
/* append canvas */
//document.body.appendchild(c);
/* set constant properties */
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)');
/* loop it, loop it good */
setinterval(loop, 16);
</script>
</body>
</html>
-
相关推荐：
canvas贝塞尔公式推导与物体跟随复杂曲线轨迹运动
两种js实现小球抛物线轨迹运动的方法
css3动画中圆形运动轨迹的实现
以上就是css和js实现唯美星空轨迹运动效果的详细内容。