CSS et JS réalisent le magnifique effet de mouvement de la trajectoire du ciel étoilé-tutoriel CSS-php.cn

CSS et JS réalisent le magnifique effet de mouvement de la trajectoire du ciel étoilé

小云云

Libérer： 2018-01-31 11:16:49

original

2743 Les gens l'ont consulté

Cet article partage principalement avec vous un bel effet de mouvement de trajectoire de ciel étoilé réalisé en utilisant CSS+JS. L'éditeur ci-dessous vous apporte un exemple de code. Les amis qui en ont besoin pourront s'y référer. t'aider.

Laissez-moi d'abord partager avec vous les rendus :

Laissez-moi partager avec vous un magnifique effet de mouvement de trajectoire de ciel étoilé obtenu en utilisant CSS+JS. n'est pas inférieur à Flash . Les codes pertinents sont les suivants :

<!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>
 -

Copier après la connexion

Recommandations associées :

Dérivation de la formule de Bessel sur toile et mouvement des objets suivant des trajectoires courbes complexes

Deux méthodes JS pour réaliser le mouvement de trajectoire parabolique de la balle

Implémentation de trajectoire de mouvement circulaire en animation CSS3

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!