前段时间,我模仿的黑客帝国动画效果深受大家喜爱,今天我再为大家分享一款模仿瀑布动画效果,希望大家喜欢。
更多精彩内容请看 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 文件,内容太多,我就不贴出来了。
【注:本文源自网络文章资源,由站长整理发布】