超酷粒子动画效果
代码语言:html
所属分类:粒子
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Azimuthal Viscosity 3</title> <style> * { border: none; margin: 0; } html, body { width: 100%; height: 100%; overflow: hidden; } canvas { background: white; background: radial-gradient(#FFF, #DDD); transform-origin: 0 0; width: 100%; height: 100%; } .ui { display: none; position: fixed; z-index: 5; bottom: 0; left: 0; width: 120px; padding: 10px; background: rgba(255, 255, 255, 0.7); } .ui p { font-size: 11px; font-weight: 700; } .ui p.zoom { margin-bottom: 5px; } .ui p.zoom span { margin-right: 5px; border: solid 1px #777; cursor: pointer; border-radius: 2px; } .ui p.zoom span.zoomin { padding: 2px 5px; } .ui p.zoom span.zoomout { padding: 2px 8px; } .ui p.zoom span:hover { background: black; color: white; } </style> </head> <body translate="no"> <div class="ui"> <p class="zoom"><span class="zoom zoomin">+</span><span class="zoom zoomout">-</span></p> <p class="zoomlevel"><span class="percent">100</span> % - (<span class="width"></span>px)(<span class="height"></span>px)</p> <p>Dead: <span class="dead">0</span></p> <p>Alive: <span class="alive">0</span></p> <p>Drawn: <span class="drawn">0</span></p> <p><span class="fps">0&.........完整代码请登录后点击上方下载按钮下载查看
网友评论0