bodymovin+anime实现骑自行车下雪打伞动画效果代码-html代码-BFW代码库

bodymovin+anime实现骑自行车下雪打伞动画效果代码

代码语言：html

所属分类：动画

代码描述：bodymovin+anime实现骑自行车下雪打伞动画效果代码，按住键盘方向键控制云的方向，长按空格键下雨。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
*{box-sizing:border-box}html{height:100%}body{margin:0;padding:0;display:flex;align-items:center;justify-content:center;height:100%;overflow:hidden;background:#b5c755;background:radial-gradient(ellipse at center,#b5c755 0,#8fb467 50%)}.post{position:absolute;bottom:20px;left:20px;font-family:'Source Sans Pro',sans-serif;color:rgba(0,0,0,0.4);font-size:12px}.post__link{color:rgba(0,0,0,0.6)}.planet{width:300px;height:300px;border-radius:100%;position:relative}.path-wrapper{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:50}.outline{fill:transparent;stroke:#4d3034;fill:#82b765;stroke-width:2;position:relative;z-index:5}.cloud-boundary{width:100px;height:270px;position:absolute;top:calc(-50% - 30px);left:50%;transform:translateX(-50%);transform-origin:bottom center;z-index:-2;will-change:auto}.cloud-boundary__marker{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:1px;height:1px}.cloud{width:100%;height:50px;position:absolute;top:0;left:0}.cloud-svg{fill:#fff}.rain{width:calc(100% - 20px);height:100%;position:absolute;top:40px;left:50%;transform:translateX(-50%);overflow:hidden;transition:opacity .3s;opacity:0}.rain--active{opacity:.6}.rain__drops-top{height:100%;width:100%;position:absolute;left:0;background:url(//repo.bfw.wiki/bfwrepo/images/bike/rain.png) 0 0 no-repeat;background-size:100% 100%;opacity:1}.rain__drops-bottom{height:100%;width:100%;position:absolute;left:0;background:url(//repo.bfw.wiki/bfwrepo/images/bike/rain.png) 0 0 no-repeat;background-size:100% 100%;opacity:1}.bike{position:absolute;top:-40px;left:-20px;width:40px;height:80px;z-index:-2;transform:rotate(0);will-change:auto}.bike__marker{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:1px;height:1px}#bm{position:relative}.bike svg{z-index:20;position:relative;will-change:auto}.umbrella-animation{position:absolute;top:-12px;left:ca.........完整代码请登录后点击上方下载按钮下载查看