Heim > Artikel > Web-Frontend > 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:492800Durchsuche

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(&#39;c&#39;),
    ctx = c.getContext(&#39;2d&#39;),
    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, &#39;hsla(330, 50%, 50%, .35)&#39;);
      gradient3.addColorStop(1, &#39;hsla(330, 50%, 50%, 0)&#39;);
      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, &#39;hsla(30, 100%, 50%, .2)&#39;);
      gradient4.addColorStop(1, &#39;hsla(30, 100%, 50%, 0)&#39;);
      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 = &#39;hsla(0, 0%, 100%, &#39;+p.alpha+&#39;)&#39;;
      }
    },
    clear = function(){
      ctx.globalCompositeOperation = &#39;destination-out&#39;;
      ctx.fillStyle = &#39;rgba(0, 0, 0, .1)&#39;;
      ctx.fillRect(0, 0, cw, ch);
      ctx.globalCompositeOperation = &#39;lighter&#39;;  
    }
    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 = &#39;hsla(&#39;+circle.hue+&#39;, 80%, 60%, 1)&#39;;
ctx.lineCap = &#39;round&#39;
var gradient1 = ctx.createLinearGradient(0, -circle.radius, 0, circle.radius);
gradient1.addColorStop(0, &#39;hsla(&#39;+circle.hue+&#39;, 60%, 50%, .25)&#39;);
gradient1.addColorStop(1, &#39;hsla(&#39;+circle.hue+&#39;, 60%, 50%, 0)&#39;);
var gradient2 = ctx.createLinearGradient(0, -circle.radius, 0, circle.radius);
gradient2.addColorStop(0, &#39;hsla(&#39;+circle.hue+&#39;, 100%, 50%, 0)&#39;);
gradient2.addColorStop(.1, &#39;hsla(&#39;+circle.hue+&#39;, 100%, 100%, .7)&#39;);
gradient2.addColorStop(1, &#39;hsla(&#39;+circle.hue+&#39;, 100%, 50%, 0)&#39;);
/* 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!

css css3 JS canvas

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

In Verbindung stehende Artikel

Mehr sehen