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

代码语言：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:calc(50%+2px);transform:translateX(-50%);width:100%;z-index:10}.light{position:absolute;top:18px;left:30px;width:0;z-index:10;height:10px;background:url(//repo.bfw.wiki/bfwrepo/images/bike/light.png) 0 0 no-repeat;background-size:22px 10px;transition:width 0s .3s,opacity .3s;transform-origin:center left;opacity:0}.light--active{width:22px;transition:width .2s,opacity 0s;opacity:.6}.tree-01{width:40px;position:absolute;top:5px;left:-5px;transform:rotate(-41deg);z-index:-3;fill:#1f6219}.tree-02{width:30px;position:absolute;top:6px;left:16px;transform:rotate(-41deg);z-index:-1;fill:#1a5215}.tree-03{width:40px;position:absolute;top:225px;left:75px;transform:rotate(-161deg);z-index:-3;fill:#1f6219}.tree-04{width:30px;position:absolute;top:225px;left:98px;transform:rotate(-169deg);z-index:-1;fill:#1a5215}.tree-05{width:30px;position:absolute;top:24px;left:225px;transform:rotate(-304deg);z-index:-1;fill:#1a5215}.mountain-1{fill:#97b45c;position:absolute;top:-18px;left:80px;transform:rotate(40deg);width:60px;z-index:-5}.mountain-2{fill:#97b45c;position:absolute;top:-5px;left:119px;transform:rotate(56deg);width:60px;z-index:-5}.mountain-4{fill:#97b45c;position:absolute;top:156px;left:182px;transform:rotate(77deg);width:60px;z-index:-5}.mountain-5{fill:#97b45c;position:absolute;top:180px;left:159px;transform:rotate(10deg);width:60px;z-index:-5}.rock-1{position:absolute;top:127px;left:-8px;width:20px;transform:rotate(-90deg);z-index:-1;fill:#6a6a6a}.rock-2{position:absolute;top:199px;left:198px;width:20px;transform:rotate(-206deg);z-index:-1;fill:#6a6a6a}.rotating-fog{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);fill:#fff;opacity:.05;width:92%;height:92%;-webkit-animation:spin;animation:spin;-webkit-animation-duration:40s;animation-duration:40s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;z-index:-10}@-webkit-keyframes spin{0%{transform:translate(-50%,-50%) rotate(360deg)}100%{transform:translate(-50%,-50%) rotate(0deg)}}@keyframes spin{0%{transform:translate(-50%,-50%) rotate(360deg)}100%{transform:translate(-50%,-50%) rotate(0deg)}}.grass-1{position:absolute;top:100px;left:-4px;transform:rotate(-86deg);width:10px;height:20px;fill:#4d3034;z-index:-10}.grass-2{position:absolute;top:209px;left:46px;transform:rotate(-156deg);width:10px;height:20px;fill:#4d3034;z-index:-10}.grass-3{position:absolute;top:109px;left:235px;transform:rotate(-266deg);width:10px;height:20px;fill:#4d3034;z-index:-10}.instructions{position:absolute;top:0;left:0;padding:20px}.instructions__item{font-family:'Source Sans Pro',sans-serif;color:rgba(0,0,0,0.3);border:1px solid rgba(0,0,0,0.2);border-radius:3px;padding:4px 10px;display:inline-block;margin-top:10px;font-size:12px}.instructions__item:first-child{margin-top:0}
</style>
</head>

<body>
    <!-- partial:index.partial.html -->
    <div class="instructions">
        <div class="instructions__item">方向键控制云朵</div><br>
        <div class="instructions__item">长按空格下雨</div><br></div>
    <div class="planet"><svg class="rotating-fog" x="0px" y="0px" viewBox="0 0 295 268.5" style="enable-background:new 0 0 295 268.5;" xml:space="preserve"><path class="st0" d="M295,160.5c0-19.2-10.4-36-26-45c-3.1-15.9-13.5-29.3-27.6-36.4c1-4,1.5-8.2,1.5-12.6c0-28.7-23.3-52-52-52
    	c-5.7,0-11.3,0.9-16.4,2.6C165.1,6.6,151.3,0,136,0c-19,0-35.7,10.2-44.8,25.5c-9-7.5-20.6-12-33.2-12c-28.7,0-52,23.3-52,52
    	c0,10.1,2.9,19.6,7.9,27.6C5.3,102.4,0,114.8,0,128.5c0,13.9,5.4,26.5,14.3,35.8C9,172.4,6,182.1,6,192.5c0,28.7,23.3,52,52,52
    	c2.1,0,4.2-0.1,6.2-0.4c8.4,5.9,18.7,9.4,29.8,9.4c3.9,0,7.6-0.4,11.3-1.2c9.5,10,22.9,16.2,37.7,16.2c13.7,0,26.1-5.3,35.4-13.9
    	c8.6,6.2,19.2,9.9,30.6,9.9c28.7,0,52-23.3,52-52c0-1.1,0-2.1-0.1-3.2C280.8,202,295,182.9,295,160.5z" /></svg>
        <div class="path-wrapper"><svg class="grass-1" x="0px" y="0px" viewBox="0 0 57.8 29" style="enable-background:new 0 0 57.8 29;" xml:space="preserve"><path d="M57.8,0c0,0-25,10.5-25,29H21C21,10.5,0,5,0,5c16.8,0,21.7,6.4,26.9,14.1C32.2,11.4,41,0,57.8,0z" /></svg><svg class="grass-2"
                x="0px" y="0px" viewBox="0 0 57.8 29" style="enable-background:new 0 0 57.8 29;" xml:space="preserve"><path d="M57.8,0c0,0-25,10.5-25,29H21C21,10.5,0,5,0,5c16.8,0,21.7,6.4,26.9,14.1C32.2,11.4,41,0,57.8,0z" /></svg><svg class="grass-3" x="0px"
                y="0px" viewBox="0 0 57.8 29" style="enable-background:new 0 0 57.8 29;" xml:space="preserve"><path d="M57.8,0c0,0-25,10.5-25,29H21C21,10.5,0,5,0,5c16.8,0,21.7,6.4,26.9,14.1C32.2,11.4,41,0,57.8,0z" /></svg><svg class="tree-01" x="0px" y="0px"
                viewBox="0 0 266.7 346.7" style="enable-background:new 0 0 266.7 346.7;" xml:space="preserve"><path d="M238.7,346.7l-17.3-77.3c9.3,11.3,45.3,20,45.3,20C240,272,204,206,204,206c8,5.3,31.3,6,31.3,6
        c-27.3-14-56.7-79.3-56.7-79.3c6.7,4.7,20,2.7,20,2.7c-24-12.7-47.3-72.7-47.3-72.7c11.3,8,20.7,6.7,20.7,6.7
        C148.7,51.3,133.3,0,133.3,0c0,0-15.3,51.3-38.7,69.3c0,0,9.3,1.3,20.7-6.7c0,0-23.3,60-47.3,72.7c0,0,13.3,2,20-2.7
        c0,0-29.3,65.3-56.7,79.3c0,0,23.3-0.7,31.3-6c0,0-36,66-62.7,83.3c0,0,36-8.7,45.3-20L28,346.7H238.7z" /></svg><svg class="tree-02" x="0px" y="0px" viewBox="0 0 266.7 346.7" style="enable-background:new 0 0 266.7 346.7;" xml:space="preserve"><path d="M238.7,346.7l-17.3-77.3c9.3,11.3,45.3,20,45.3,20C240,272,204,206,204,206c8,5.3,31.3,6,31.3,6
        c-27.3-14-56.7-79.3-56.7-79.3c6.7,4.7,20,2.7,20,2.7c-24-12.7-47.3-72.7-47.3-72.7c11.3,8,20.7,6.7,20.7,6.7
        C148.7,51.3,133.3,0,133.3,0c0,0-15.3,51.3-38.7,69.3c0,0,9.3,1.3,20.7-6.7c0,0-23.3,60-47.3,72.7c0,0,13.3,2,20-2.7
        c0,0-29.3,65.3-56.7,79.3c0,0,23.3-0.7,31.3-6c0,0-36,66-62.7,83.3c0,0,36-8.7,45.3-20L28,346.7H238.7z" /></svg><svg class="tree-03" x="0px" y="0px" viewBox="0 0 266.7 346.7" style="enable-background:new 0 0 266.7 346.7;" xml:space="preserve"><path d="M238.7,346.7l-17.3-77.3c9.3,11.3,45.3,20,45.3,20C240,272,204,206,204,206c8,5.3,31.3,6,31.3,6
        c-27.3-14-56.7-79.3-56.7-79.3c6.7,4.7,20,2.7,20,2.7c-24-12.7-47.3-72.7-47.3-72.7c11.3,8,20.7,6.7,20.7,6.7
        C148.7,51.3,133.3,0,133.3,0c0,0-15.3,51.3-38.7,69.3c0,0,9.3,1.3,20.7-6.7c0,0-23.3,60-47.3,72.7c0,0,13.3,2,20-2.7
        c0,0-29.3,65.3-56.7,79.3c0,0,23.3-0.7,31.3-6c0,0-36,66-62.7,83.3c0,0,36-8.7,45.3-20L28,346.7H238.7z" /></svg><svg class="tree-04" x="0px" y="0px" viewBox="0 0 266.7 346.7" style="enable-background:new 0 0 266.7 346.7;" xml:space="preserve"><path d="M238.7,346.7l-17.3-77.3c9.3,11.3,45.3,20,45.3,20C240,272,204,206,204,206c8,5.3,31.3,6,31.3,6
        c-27.3-14-56.7-79.3-56.7-79.3c6.7,4.7,20,2.7,20,2.7c-24-12.7-47.3-72.7-47.3-72.7c11.3,8,20.7,6.7,20.7,6.7
        C148.7,51.3,133.3,0,133.3,0c0,0-15.3,51.3-38.7,69.3c0,0,9.3,1.3,20.7-6.7c0,0-23.3,60-47.3,72.7c0,0,13.3,2,20-2.7
        c0,0-29.3,65.3-56.7,79.3c0,0,23.3-0.7,31.3-6c0,0-36,66-62.7,83.3c0,0,36-8.7,45.3-20L28,346.7H238.7z" /></svg><svg class="tree-05" x="0px" y="0px" viewBox="0 0 266.7 346.7" style="enable-background:new 0 0 266.7 346.7;" xml:space="preserve"><path d="M238.7,346.7l-17.3-77.3c9.3,11.3,45.3,20,45.3,20C240,272,204,206,204,206c8,5.3,31.3,6,31.3,6
        c-27.3.........完整代码请登录后点击上方下载按钮下载查看