TweenMax实现天女散花canvas动画效果代码
代码语言:html
所属分类:动画
代码描述:TweenMax实现天女散花canvas动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html lang="en"> <head> <meta charset="UTF-8"> <style> body { margin: 0; background: #000; overflow: hidden; } canvas { width: 100vw; height: 100vh; } </style> <style type="text/css"> .dg { } .dg ul { list-style: none; margin: 0; padding: 0; width: 100%; clear: both; } .dg.ac { position: fixed; top: 0; left: 0; right: 0; height: 0; z-index: 0; } .dg:not(.ac) .main { /** Exclude mains in ac so that we don't hide close button */ overflow: hidden; } .dg.main { -webkit-transition: opacity 0.1s linear; -o-transition: opacity 0.1s linear; -moz-transition: opacity 0.1s linear; transition: opacity 0.1s linear; } .dg.main.taller-than-window { overflow-y: auto; } .dg.main.taller-than-window .close-button { opacity: 1; /* TODO, these are style notes */ margin-top: -1px; border-top: 1px solid #2c2c2c; } .dg.main ul.closed .close-button { opacity: 1 !important; } .dg.main:hover .close-button, .dg.main .close-button.drag { opacity: 1; } .dg.main .close-button { /*opacity: 0;*/ -webkit-transition: opacity 0.1s linear; -o-transition: opacity 0.1s linear; -moz-transition: opacity 0.1s linear; transition: opacity 0.1s linear; border: 0; position: absolute; line-height: 19px; height: 20px; /* TODO, these are style notes */ cursor: pointer; text-align: center; background-color: #000; } .dg.main .close-button:hover { background-color: #111; } .dg.a { float: right; margin-right: 15px; overflow-x: hidden; } .dg.a.has-save > ul { margin-top: 27px; } .dg.a.has-save > ul.closed { margin-top: 0; } .dg.a .save-row { position: fixed; top: 0; z-index: 1002.........完整代码请登录后点击上方下载按钮下载查看
网友评论0