recherche

Maison  >  Article  >  interface Web  >  CSS et JS réalisent le magnifique effet de mouvement de la trajectoire du ciel étoilé

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

小云云
小云云original
2018-01-31 11:16:492820parcourir

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

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!

css css3 JS canvas
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication détaillée de la refactorisation du code CSSArticle suivant：Explication détaillée de la refactorisation du code CSS

Articles Liés

Voir plus