html动态特效网页代码

这是一篇关于HTML动态特效网页代码的文章，我们知道在编写网页的时候，通过添加一些动态特效，可以使网页更加精彩有趣。下面是一些常用的HTML动态特效的代码示例：

  
    //使用HTML5的canvas实现动态粒子效果
    var canvas = document.getElementById("canvas"),context = canvas.getContext("2d"),// 设置画布resize
    function resizeCanvas() {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
    }
    resizeCanvas();
    window.onresize = resizeCanvas;

    // 生成随机颜色
    function randomColor() {
      return "rgb(" +
             Math.floor(Math.random() * 255) + "," +
             Math.floor(Math.random() * 255) + "," +
             Math.floor(Math.random() * 255) + ")";
    }

    // 绘制单个粒子
    function drawParticle(x,y,r) {
      var gradient = context.createradialGradient(x,x,r);
      gradient.addColorStop(0,"white");
      gradient.addColorStop(1,randomColor());
      context.beginPath();
      context.arc(x,r,2 * Math.PI);
      context.fillStyle = gradient;
      context.fill();
    }

    // 动态绘制粒子
    var particles = [];
    function drawParticles() {
      context.clearRect(0,canvas.width,canvas.height);
      for (var i = 0; i  0) {
          drawParticle(particles[i].x,particles[i].y,particles[i].r);
        }
      }
      // 控制粒子数量，动态生成和删除粒子
      while (particles.length  0; });
      requestAnimationFrame(drawParticles);
    }
    drawParticles();
  

以上代码就是使用HTML5的canvas实现动态粒子效果的代码示例，通过这些代码，我们可以实现让网页有更加丰富的动态特效。