HTML5 Canvas模仿瀑布动画效果

HTML5 herman 647浏览 0评论

前段时间,我模仿的黑客帝国动画效果深受大家喜爱,今天我再为大家分享一款模仿瀑布动画效果,希望大家喜欢。

正如本文的主题一样,本动画案例使用的是 HTML5 + Canvas 技术实现。最终运行效果如下面截图:

Canvas 实现瀑布动画效果

相关主要的实现代码如下:

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>业余草:www.xttblog.com,HTML5 Canvas瀑布下动画DEMO</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
	<div id="container">
	  <canvas id="waterfall"></canvas>
	  <div class="emma flex"><div></div></div>
	</div>
<script type="text/javascript" src="js/pixi.min.js"></script>
<script type="text/javascript" src="js/tinycolor.min.js"></script>
<script  src="js/index.js"></script>
</body>
</html>

style.css 代码如下:

body {
  background: #222;
  color: white;
}
#container {
  box-shadow: inset 0 1px 0 #444, 0 -1px 0 #000;
  height: 100vh;
  width: 100vw;
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  will-change: transform;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
}
canvas#waterfall {
  display: block;
  margin: 0 auto;
  width: 30%;
  height: 55%;
  will-change: transform;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
}
.emma {
  height: 100vh;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
}
h1 {
  color: #0af;
  font-size: 30vw;
}
canvas#surface {
  -webkit-animation: fade-in 3000ms forwards;
          animation: fade-in 3000ms forwards;
  display: block;
  left: 0;
  position: absolute;
  top: 0;
  z-index: -1;
}
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

其中的 3 个 js 文件,内容太多,我就不贴出来了。想要的可以私聊我,或者公众号内回复“瀑布动画”获得下载地址!!

业余草微信公众号

欢迎关注我的个人微信公众号:业余草(yyucao)!

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加QQ1群:135430763,QQ2群:454796847,QQ3群:187424846。QQ群进群密码:xttblog,想加微信群的朋友,可以微信搜索:xmtxtt,备注:“xttblog”,添加助理微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

本文原文出处:业余草: » HTML5 Canvas模仿瀑布动画效果