jquery+css实现气球飘动动画效果代码-html代码-BFW代码库

jquery+css实现气球飘动动画效果代码

代码语言：html

所属分类：动画

代码描述：jquery+css实现气球飘动动画效果代码

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

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

<head>
    <meta charset="UTF-8">


    <style>
        .container {
      height: 100vh;
      overflow: hidden;
        width:500px;
    
        margin: 0 auto;
    
    
    }
    svg {
      display: inline-block;
      position: absolute;
    width:100vw;
      top: 0;
      left: 0;
    
    }
    canvas{
      transform: rotate(270deg); 
      margin-top:60vh;
      -webkit-filter: blur(2px);
    
    }
    .balloon {
      width: 126px;
      /* width has to be 70% of height */
      height: 180px;
      background-color: #999;
      border-radius: 50% 50% 50% 50%/40% 40% 60% 60%;
      
      float: left;
    }
    
    .balloon:before {
      display: block;
      background-color: #fff;
      content: ' ';
      width: 20px;
      height: 10px;
      position: relative;
      top: 179px;
      left: 53px;
      border-radius: 0 0 50% 50%;
    }
    
    .balloon:after {
      display: block;
      background-color:#fff;
      -webkit-filter: blur(2px);
      content: ' ';
      width: 1px;
      height:520px;
      position: relative;
      top: 179px;
      left: 61px;
    }
    #waves{
      z-index:1000;
    }
    .balloon:nth-child(even) {
      margin-top: 100px;
    }
    body {
      margin: 0;
      padding: 0;
    
    
    overflow:hidden;
    
            
            
    }
    
     body {
          animation: colorchange 50s; /* animation-name followed by duration in seconds*/
             /* you could also use milliseconds (ms) or something like 2.5s */
          -webkit-animation: colorchange 50s infinite; /* Chrome and Safari */
        }
    
        @keyframes colorchange
        {
          0%   {background: red;}
          25%  {backg.........完整代码请登录后点击上方下载按钮下载查看