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

代码语言：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%  {background: yellow;}
          50%  {background: blue;}
          75%  {background: green;}
          100% {background: red;}
        }
    
        @-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */
        {
          0%   {background: red;}
          25%  {background: yellow;}
          50%  {background: blue;}
          75%  {background: green;}
          100% {background: red;}
        }
    
        
        .balloon:nth-child(1) {
        
    
    
    background: #4776E6; /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #4776E6 , #8E54E9); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #4776E6 , #8E54E9); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
            
            z-index:5;
           margin-top:70px;
          margin-left:40px;
       
          animation: right 3.5s infinite ease-in-out;    
        }
    
        .balloon:nth-child(2) {
    
    
    background: #BA5370; /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #BA5370 , #F4E2D8); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #BA5370 , #F4E2D8); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
             
         margin-left:-0px;
             margin-top:150px;
        
          animation: left 4.1s infinite ease-in-out;
        }
    
        .balloon:nth-child(3) {
       
    
    background: #f7ff00; /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #f7ff00 , #db36a4); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #f7ff00 , #db36a4); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
            
             margin-left:-40px;
        
          animation: right 2.95s infinite ease-in-out;
        }
    
        .balloon:nth-child(4) {
      
    
    background: #FF512F; /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #FF512F , #DD2476); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #FF512F , #DD2476); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
            
             margin-left:-80px;
       
       
          animation: left 1.95s infinite ease-in-out;
         }
    
      
    
    
    
    
    @keyframes right {
      0%   { transform: translate(-1px);  }
      50%  { transform: translate(100px);   }
      100% { transform: translate(-1px);  }
    }
    
    @keyframes left {
      0%   { transform: translate(-100px);   }
      50%  { transform: translate(70px);  }
      100% { transform: translate(-100px);   }
    }
    </style>

</head>

<body>

    <svg viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet">
    <path d="M0,100 C150,200 350,0 500,100 L500,00 L0,0 Z" style="stroke: none; fill:#fff;"></path>
  </svg>
    <div class='container'>
        <div class='balloon'></div>
        <div class='balloon'></div>
        <div class='balloon'></div>
        <div class='balloon'></div>



    </div>
    <canvas style="z-index:-1000; position: absolute; top: 0px; left: 0px;" id="waves"></canvas>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <script>
        /**
 * Generate.........完整代码请登录后点击上方下载按钮下载查看