html--火山爆发

最新推荐文章于 2024-06-14 07:44:22 发布
最新推荐文章于 2024-06-14 07:44:22 发布
阅读量514 收藏 7
点赞数 5
分类专栏： html 文章标签： html css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/stqer/article/details/139178561
版权 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style>
  html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  font-family: Helvetica, Arial;
  color: #ffffff;
}

body {
  background: linear-gradient(0deg, #aabbbb, #88aadd);
}

#stage, #smoke {
  position: absolute;
  top: 0;
  left: 0;
}

#stage {
  z-index: 20;
}

#smoke {
  z-index: 5;
}

.volcano-container {
  z-index: 10;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.volcano {
  position: absolute;
  border: 380px solid transparent;
  border-left: 140px solid transparent;
  border-bottom: 200px solid #240904;
  width: 0;
  height: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.volcano.flipped {
  transform: scaleX(-1);
}

.lip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 300px;
  height: 240px;
  background-color: #240904;
  border-radius: 200px;
}
.lip .lava {
  position: absolute;
  left: 0;
  right: 0;
  top: 10px;
  margin: auto;
  width: 270px;
  height: 230px;
  background-color: #fa7510;
  border-radius: 200px;
  clip-path: ellipse(120px 60px at top);
}
.lip .mask {
  position: absolute;
  top: 80px;
  left: 0;
  right: 0;
  margin: auto;
  background-color: #240904;
  width: 290px;
  height: 300px;
}

.toggle {
  display: none;
  z-index: 100;
  position: absolute;
  top: 10px;
  left: 10px;
}

  </style>
 </HEAD>

 <BODY>
 <canvas id="smoke"></canvas>
<canvas id="stage"></canvas>

<div class="volcano-container">
  <div class="volcano"></div>
  <div class="volcano flipped"></div>
  <div class="lip">
    <div class="lava"></div>
    <div class="mask"></div>
  </div>
</div>

<div class="toggle">
  <label for="awesome">
    <input type="checkbox" id="awesome" /> <strong>AWESOME MODE</strong>
  </label>
</div>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  <script>
  var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

// Best viewed in Chrome

//=============================
// Consts
//=============================
var MAX_WIDTH = 12;
var FPS = 60;

//=============================
// Helpers
//=============================
var getTimestamp = function getTimestamp() {
  return new Date().getTime();
};

var random = function random() {
  var max = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
  var signed = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;

  return signed ? (Math.random() - 0.5) * 2 * max : Math.random() * max;
};

var getPower = function getPower() {
  var power = (getTimestamp() - mouseStart) / 150;
  return power > 30 ? 30 : power;
};

var shakeVolcano = function shakeVolcano(power) {
  $volcano.css({
    left: random(power, true),
    bottom: -1 * random(power)
  });

  $lava.css({
    left: random(power, true),
    top: 10 + random(power) / 2,
    width: random(power) + 260
  });
};

//=============================
// Main
//=============================
var targetDelta = 1000 / FPS;

var stage = document.getElementById('stage');
var ctx = stage.getContext('2d');
var smoke = document.getElementById('smoke');
var ctx2 = smoke.getContext('2d');

var particles = [];

var AWESOME_MODE = false;
var mouseDown = false;
var isExploding = false;
var stageWidth = 0;
var stageHeight = 0;
var previousTimestamp = getTimestamp();
var previousRender = getTimestamp();
var previousPower = 0;
var mouseStart = getTimestamp();
var mouseEnd = getTimestamp();

var $volcano = void 0;
var $lava = void 0;

var generateParticles = function generateParticles() {
  var amount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 20;
  var power = arguments[1];

  for (var i = 0; i < amount; i++) {
    particles.push(new Particle(power));
  }
};

var loop = function loop() {

  if (getTimestamp() - previousTimestamp < targetDelta) {
    requestAnimationFrame(loop);
    return;
  }

  ctx.globalCompositeOperation = 'lighter';

  if (!AWESOME_MODE) {
    ctx.clearRect(0, 0, stageWidth, stageHeight);
  }

  ctx2.clearRect(0, 0, stageWidth, stageHeight);

  if (mouseDown) {
    generateParticles(random(2) + 1, getPower() / 2);
    shakeVolcano(getPower());
  }

  if (isExploding && previousPower > 0 && !mouseDown) {
    shakeVolcano(previousPower);
    previousPower -= 0.35;

    if (previousPower < 1) {
      isExploding = false;
    }
  }

  // constant particles
  if (random() < 0.3) {
    generateParticles(1, 1);
  }

  // smoke effects
  if (random() < 0.08) {
    particles.push(new Smoke());
  }

  // animate
  particles.forEach(function (particle) {
    particle.animate();
    particle.render();
  });

  // remove out of bounds particles
  particles = particles.filter(function (particle) {
    if (particle instanceof Smoke && particle.y + particle.width > 0) {
      return true;
    } else if (particle instanceof Particle && particle.y < stageHeight && particle.x > 0 - particle.width && particle.x < stageWidth + particle.width) {
      return true;
    } else {
      return false;
    }
  });

  previousTimestamp = getTimestamp();
  requestAnimationFrame(loop);
};

var Particle = function () {
  function Particle(oPower) {
    _classCallCheck(this, Particle);

    var power = oPower || random(5);

    this.x = stageWidth / 2 + random(80, true);
    this.y = stageHeight - 200 + random(20, true);

    this.width = random(MAX_WIDTH) + 1;
    this.red = Math.floor(210 + this.width * 2);
    this.green = Math.floor(90 + this.width * 3);
    this.blue = Math.floor(30 + this.width * 2);
    this.alpha = 1;
    this.speed = power / (this.width * 0.13);
    this.angle = random(45);
    this.hasBounced = false;

    this.velocityY = Math.abs(Math.sin(this.angle)) * this.speed;
    this.velocityX = Math.cos(this.angle) * this.speed / 2;

    this.xDirection = this.velocityX > 0;

    if (Math.abs(this.velocityX) > 2) {
      this.velocityX = this.velocityX / 2;
    }
  }

  _createClass(Particle, [{
    key: 'animate',
    value: function animate() {
      this.x -= this.velocityX;
      this.y -= this.velocityY;

      // add gravity
      this.velocityY -= this.width / (this.hasBounced ? 170 : 100);

      if (!this.hasBounced && random() < 0.1 && this.y > stageHeight - 150 && this.x > stageWidth / 2 - 180 && this.x < stageWidth / 2 + 180) {
        this.hasBounced = true;
        this.velocityX = Math.sin(random(45)) + random(2) * this.xDirection;
        this.velocityY /= 8;
      }
    }
  }, {
    key: 'render',
    value: function render() {
      var colour = this.getColour();

      ctx.beginPath();
      ctx.arc(this.x, this.y, this.width, 0, Math.PI * 2, true);
      ctx.lineWidth = this.width;
      ctx.fillStyle = colour;
      //ctx.shadowBlur = random(20);
      //ctx.shadowColor = colour;
      ctx.fill();
    }
  }, {
    key: 'getColour',
    value: function getColour(red, green, blue, alpha) {
      return 'rgba(' + (red || this.red) + ', ' + (green || this.green) + ', ' + (blue || this.blue) + ', ' + (alpha || this.alpha) + ')';
    }
  }]);

  return Particle;
}();

var Smoke = function () {
  function Smoke() {
    _classCallCheck(this, Smoke);

    this.x = stageWidth / 2 + random(75, true);
    this.y = stageHeight;

    this.width = random(80) + 50;
    this.red = 100;
    this.green = 100;
    this.blue = 100;
    this.alpha = random() + 0.3;
    this.speed = random(2) + 1;
  }

  _createClass(Smoke, [{
    key: 'animate',
    value: function animate() {
      //this.x += random(2, true);
      this.y -= this.speed;
    }
  }, {
    key: 'render',
    value: function render() {
      var colour = this.getColour();

      ctx2.beginPath();
      ctx2.arc(this.x, this.y, this.width, 0, Math.PI * 2, true);
      ctx2.lineWidth = this.width;
      ctx2.fillStyle = colour;
      ctx2.fill();
    }
  }, {
    key: 'getColour',
    value: function getColour(red, green, blue, alpha) {
      return 'rgba(' + (red || this.red) + ', ' + (green || this.green) + ', ' + (blue || this.blue) + ', ' + (alpha || this.alpha) + ')';
    }
  }]);

  return Smoke;
}();

//=============================
// Setup
//=============================

var updateCanvasSize = function updateCanvasSize() {
  stageWidth = window.innerWidth;
  stageHeight = window.innerHeight;

  stage.width = stageWidth;
  stage.height = stageHeight;

  smoke.width = stageWidth;
  smoke.height = stageHeight;

  particles = [];
};

$(window).on('mousedown', function (e) {
  mouseStart = getTimestamp();
  mouseDown = true;

  if (AWESOME_MODE) {
    particles = [];
    ctx.clearRect(0, 0, stageWidth, stageHeight);
  }
});

$(window).on('mouseup', function (e) {
  var power = getPower();

  isExploding = true;
  mouseDown = false;
  mouseEnd = getTimestamp();
  previousPower = power;

  generateParticles((random(16) + 30) * power, power / 1.1);

  setTimeout(function () {
    generateParticles(14 * power, power / 1.4);
  }, 100);

  setTimeout(function () {
    generateParticles(6 * power, power / 2);
  }, 200);

  setTimeout(function () {
    generateParticles(4 * power, power / 2);
  }, 400);
});

updateCanvasSize();
$(window).on('resize', updateCanvasSize);

$(function () {
  $volcano = $('.volcano-container');
  $lava = $volcano.find('.lava');

  setTimeout(function () {
    $('.toggle').fadeIn();
  }, 6000);

  $('.toggle').on('click', function () {
    AWESOME_MODE = $('#awesome').is(':checked');
  });
});

//=============================
// Run it!
//=============================

generateParticles(200, 8);
loop();
  </script>
 </BODY>
</HTML>

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

fo安方
关注
  • 5
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Volcano Eruptions 火山爆发-数据集
03-12
Axios按海拔和类型整理了喀拉喀托火山(1883年之后)以来火山爆发的有趣图。 eruptions.csv events.csv sulfur.csv tree_rings.csv volcano.csv
CSS篇-dbMovies和dbBooks小网页
qq_54379580的博客
12-26 391
浅做的douban电影和读书啦~~~快来看,颜色花里胡哨的^_^
html功能元素
qq_52783355的博客
07-18 98
html功能元素
html的4个常用标签
2301_78251908的博客
03-16 895
浏览器角度，权重在搜索引擎的优化，搜索引擎的优化除了会抓取meta标签配置的keywords之外还会优先住区标题的内容，h1标签的权重是最高的，通常一个页面只使用一个h1，来制作网页的logo。通过运行 04标签的使用-a标签.html 在网页中打开进入跳转到 04标签的使用a标签跳转.html。其他内容与第一种方法中的一致，使用id属性时，标签要与锚点的标签一致都是h标签。文本的定义来讲，就是文字的权重，比如设置h标签的文字就富裕了标题的语义。点击后出现 04标签的使用a标签跳转.html 中的内容。
业务知识 - 行业笔记
热门推荐
自娱自乐的代码人
07-31 3万+
第一章：抖音成为电商流量新宠 从电商到微商，再到抖商： 电商：通过长期消费类积累信用（淘宝、天猫） 微商：依靠社交关系信任来消费（微商直销、社群运营） 抖商：传播和销售一体化 抖商竞争力五点： 粉丝接受度高。非直接硬广，通过精美饰品+音乐+情节，让商家产品直观明显 用户更加精准。算法推送，目标用户群体精准 触达更多用户。抖音是去中心化的，内容好就能上热门，覆盖更多用户 抖音平台流量。MAU5亿，一二三线年轻人群。 门槛低。 抖音快速成长的原因： 快跑的开发迭代模式。前期注重工具属性，有利
火山喷发(动态规划)
08-27 1387
【题目描述】 火山喷发对所有附近的生物具有毁灭性的影响。在本题中，我们希望用数值来模拟这一过程。 在环境里有 \(n\) 个生物分别具有 \(A_1,A_2,\cdots,A_n\)点生命值，一次火山喷发总计 \(M\) 轮，每轮造成 \(1\) 点伤害，等概率地分给所有存活的生物，即如果目前有 \(K\) 个活着的生物，每个生物受到这点伤害的概率是 \(\frac{1}{K}\)。如果...
修改jsp代码之后浏览器报500错误问题以及解决方法
徒挽的博客
07-20 3026
自己在写JavaWeb项目的时候，遇见了一个特别的bug，找个半天资料也没有解决掉，现在将这个bug以及解决方法抛出来，希望可以帮助到大家。
html5：列表、表格、表单元素
qq_20006765的博客
08-02 140
html5中列表、表格、表单元素的介绍
html单选计算总价,JavaScript由单价、数量计算总价
weixin_33522643的博客
06-27 862
#includeint main(){printf("请输入身高的英尺和英寸，如5尺7寸表示为5 7");int foot ;int inch;scanf("%d %d",&foot,&inch);printf("得到身高为%f米",((foot+inch/12.0)*0.3048));return 0;}...#includeint main(){int price=0;prin...
大数据-算法-火山岩气藏储层特征及数值模拟研究.pdf
04-16
大数据-算法
大数据-算法-火山岩气藏非线性渗流机理及气井产能模型研究.pdf
04-16
大数据-算法
（10）SIMCA14.1操作教程--3D火山图.pdf
04-14
SIMCA 14.1是一款功能强大的多元变量统计分析软件，伸手全球科研工作者的喜欢，它为为多元变量统计分析提供了完善的解决方案和全新的标准。旨在帮助用户快速有效的挖掘数据并解释数据结果。并且不管再大量数据，批量...
大数据-算法-火山岩裂缝性底水油藏油气水三相驱替机理及数值模拟研究.pdf
04-16
大数据-算法
VIIRS-NPP夜光遥感数据下载
Yqq19950707的博客
03-05 1万+
VIIRS-NPP夜光遥感数据下载 一、数据简介 1.NPP 在过去几年里，NASA运行了很多卫星系统，包括著名的EOS系统。现在，NASA正在构建一个新的卫星系统继续全球环境观测，其中重要的卫星系统是NPOESS Preparatory Project (简称NPP，也有资料显示是National Polar-orbiting Partnership的简称)，由NASA、NOAA和美国空军共同研...
HTML静态网页成品作业(HTML+CSS)—— 环保主题介绍网页(5个页面)
weixin_42283461的博客
06-10 1154
HTML静态网页成品作业(HTML+CSS)—— 环保主题介绍网页(5个页面)
HTML初体验
最新发布
linux423的博客
06-14 344
可参考jd.com官网，ctrl+u查看当前页面源代码找到你的项目，在项目中创建html类型的网页文件标准的HTML正确书写格式效果如下。
HTML跨年烟花
兔子王
06-04 1万+
学会了这个html烟花秀，跨年就不缺文案喽~
HTML 颜色名
xyq2024的博客
06-12 561
HTML 颜色名是一组预定义的颜色，可以在 HTML 和 CSS 中使用。这些颜色名易于记忆，方便开发者快速选择和使用。本文将详细介绍 HTML 颜色名，包括它们的用途、优点以及如何在网页设计中使用它们。
PS-INSAR优点
10-17
2. 高精度：PS-InSAR技术可以实现毫米级别的地表形变监测，对于地震、火山、地质灾害等自然灾害的监测具有重要意义。 3. 高时空分辨率：PS-InSAR技术可以实现高时空分辨率的地表形变监测，可以对大范围、多点、多时...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

fo安方

觉得俺的文章还行，感谢打赏，爱

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值