火焰效果

下载代码

html

css

分享到微信朋友圈

html

css

body {
  margin: 0;
  overflow: hidden;
  background-color: #1a1a1a;
}

.center {
  position: absolute;
  margin: auto;
  top: 0; bottom: 0;
  left: 0; right: 0;
}

canvas {
  position: absolute;
}

.gooeys {
    width: 100%;
    height: 100%;
    -webkit-filter: url('#filter');
            filter: url('#filter');
}

.bg {
    width: 390px;
    height: 390px;
    background-color: white; 
    border-radius: 50%; 
    -webkit-transition: all 0.5s; 
            transition: all 0.5s;  
}

.pot {
  box-sizing: border-box;
  width: 250px;
  height: 120px;
  top: 100px;
  background: -webkit-radial-gradient(#121, #111 45%);
  background: radial-gradient(#121, #111 45%);
  border-radius: 25px 25px 80px 80px;
}

.pot-top {
  box-sizing: border-box;
  width: 250px;
  height: 40px;
  background-color: #111;
  top: -50px;
  border-radius: 20px 20px 80px 80px;
  box-shadow: #4f4 0 10px 45px -17px inset; 
}

.highlight{
  content: "";
  top: 20px; bottom: auto;
  background-color: rgba(68,255,68,0.3);
  width: 150px;
  height: 0;
  border-radius: 0 0 50% 50%;
  box-shadow: #4f4 0 0 35px 2px;
}

.glow {
  top: -100px;
  width: 0px;
  height: 0px;  
  border-radius: 50%;
  color: rgba(68,255,68,0.4);
  box-shadow: 0 0 150px 50px;
  -webkit-animation: glow 0.5s linear infinite alternate;
          animation: glow 0.5s linear infinite alternate;
}

.shadow {
  top: 210px;
  width: 220px;
  height: 20px;  
  background-color: #111;
  border-radius: 50%; 
}

@-webkit-keyframes glow {
  to{
    box-shadow: 0 0 120px 50px;
  }
}

@keyframes glow {
  to{
    box-shadow: 0 0 120px 50px;
  }
}

JavaScript

canvas = document.getElementById("canvas");
  var context = canvas.getContext('2d');
  W = canvas.width = window.innerWidth;
  H = canvas.height = window.innerHeight;
  generatorStock = [];

generatorStock.push(new particleGenerator( 2, 3, 30, 30));
 
  function randomInt(min, max) {
    return Math.floor(min + Math.random() * (max - min + 1));
  }

function clamp(value, min, max) {
    return Math.min(Math.max(value, Math.min(min, max)), Math.max(min, max));
  }

context.beginPath();
    context.arc(this.x, this.y, this.radius, Math.PI * 2, false);
    context.fillStyle = "rgba(255,255,255,0.5)";
    context.strokeStyle = "#2f2";
    context.lineWidth = 10;
    context.fill();
    context.stroke();
    context.closePath();

}

function update() {
    context.clearRect(0, 0, W, H);

for (var i = 0; i < generatorStock.length; i++) {
      generatorStock[i].animate();
    }
    requestAnimationFrame(update);
  }

update();

window.addEventListener('resize', function(e) {
    W = window.innerWidth;
    H = window.innerHeight;
  }, false);

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