• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

HTML5 Canvas模仿瀑布动画效果

JAVA web前端中文站 2年前 (2018-02-24) 3483次浏览 已收录 0个评论

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

更多精彩内容请看 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 文件,内容太多,我就不贴出来了。

 

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


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:HTML5 Canvas 模仿瀑布动画效果
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址