前段时间,我模仿的黑客帝国动画效果深受大家喜爱,今天我再为大家分享一款模仿瀑布动画效果,希望大家喜欢。
正如本文的主题一样,本动画案例使用的是 HTML5 + 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)!
: » HTML5 Canvas模仿瀑布动画效果
原创文章,作者:506227337,如若转载,请注明出处:https://blog.ytso.com/251362.html