css3运动后留下轨迹尾巴_利用CSS+JS实现唯美星空轨迹运动效果

先给大家分享效果图：

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

cloth

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;

*/

}

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 = [],

particle