帆布粉红色波浪

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(a){window.setTimeout(a,1E3/60)}}();

function loader() {
  var canvas = document.createElement( 'canvas' ),
      ctx = canvas.getContext( '2d' ),
      cw = canvas.width = window.innerWidth,
      ch = canvas.height = 200,
      twoPi = Math.PI * 2,
      tick = 0,
      ot = Date.now(),
      dt = 1,
      fps = 1000 / 60,
      count = cw / 50,
      spacing = cw / count,
      circles = [];
  
  canvas.style.marginTop = -ch / 2 + 'px';
  ctx.fillStyle = '#ea80b0';  
  document.body.appendChild( canvas );
  
  function Circle( opt ) {
    for( var key in opt ) {
      this[ key ] = opt[ key ];
    }
  }

Circle.prototype.update = function() {
    this.x = this.xBase + Math.sin( ( tick + this.tickOffset ) / this.tickDiv ) * this.xRange;
    this.y = this.yBase + Math.sin( ( tick + this.tickOffset ) / this.tickDiv ) * this.yRange;
    this.radius = this.radiusBase + Math.cos( ( tick + this.tickOffset  ) / this.tickDiv ) * this.radiusRange;
  };

loop = function() {
    requestAnimFrame( loop )
    var now = Date.now(),
    dt = ( now - ot ) / fps;
    ot = now ;
    tick += dt;
    ctx.clearRect( 0, 0, cw, ch );
    var i = circles.length;
    ctx.beginPath();
    while( i-- ){
      var circle = circles[ i ];
      circle.update();
      ctx.moveTo( circle.x, circle.y )
      ctx.arc( circle.x, circle.y, circle.radius, 0, twoPi );
    }
    ctx.fill();
  }

for( var i = 0; i < count; i++ ){
    circles.push( new Circle( {
      xBase: ( cw / 2 ) + ( i * spacing ) - ( ( ( count - 1 ) * spacing ) / 2 ),
      xRange: 0,
      yBase: ch / 2,
      yRange: 75,
      radiusBase: 10,
      radiusRange: 10,
      tickDiv: 15,
      tickOffset: i * 10
    } ) );  
  }
  
  for( var i = 0; i < count; i++ ){
    circles.push( new Circle( {
      xBase: ( cw / 2 ) + ( i * spacing ) - ( ( ( count - 1 ) * spacing ) / 2 ),
      xRange: 20,
      yBase: ch / 2,
      yRange: 0,
      radiusBase: 3,
      radiusRange: 3,
      tickDiv: 15,
      tickOffset: i * 10
    } ) );  
  }
  
  loop();    
}

setTimeout( loader, 50 );

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg