HTML5 Canvas模仿瀑布动画效果

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

正如本文的主题一样，本动画案例使用的是 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 文件，内容太多，我就不贴出来了。

【注：本文源自网络文章资源，由站长整理发布】