前段时间，我模仿的黑客帝国动画效果深受大家喜爱，今天我再为大家分享一款模仿瀑布动画效果，希望大家喜欢。
更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏
正如本文的主题一样，本动画案例使用的是 HTML5 + Canvas 技术实现。
相关主要的实现代码如下：
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>web 前端中文站：www.lisa33xiaoq.net，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 文件，内容太多，我就不贴出来了。
【注：本文源自网络文章资源，由站长整理发布】
