Heim >Web-Frontend >CSS-Tutorial >CSS und JS realisieren den wunderschönen Bewegungseffekt der Sternenhimmel-Flugbahn
CSS und JS realisieren den wunderschönen Bewegungseffekt der Sternenhimmel-Flugbahn
- 小云云Original
- 2018-01-31 11:16:492849Durchsuche
Dieser Artikel zeigt Ihnen hauptsächlich einen wunderschönen Sternenhimmel-Bewegungseffekt, der mit CSS+JS realisiert wurde. Der folgende Editor bringt Ihnen einen Beispielcode, den ich hoffentlich nutzen kann Dir helfen.
Lassen Sie mich zunächst die Renderings mit Ihnen teilen:
Lassen Sie mich mit Ihnen einen wunderschönen Sternenhimmel-Flugbahnbewegungseffekt teilen, der mit CSS+JS erzielt wurde steht Flash in nichts nach. Die relevanten Codes lauten wie folgt:
<!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>
-Verwandte Empfehlungen:
Ableitung der Leinwand-Bessel-Formel und Bewegung von Objekten entlang komplexer Kurvenbahnen
Zwei JS-Methoden zur Realisierung der parabolischen Flugbahnbewegung des Balls
Implementierung der kreisförmigen Bewegungsbahn in CSS3-Animation
Das obige ist der detaillierte Inhalt vonCSS und JS realisieren den wunderschönen Bewegungseffekt der Sternenhimmel-Flugbahn. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Erläuterung des CSS-Code-RefactoringsNächster Artikel：Detaillierte Erläuterung des CSS-Code-Refactorings