div+css实现热气球空中飞行动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：div+css实现热气球空中飞行动画效果代码

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

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

<head>
    <meta charset="UTF-8">
    <style>
        *, *::before, *::after {
          box-sizing: border-box;
        }
        
        html {
          font-size: 10px;
        }
        
        body {
          width: 100vw;
          height: 100vh;
          display: flex;
          justify-content: center;
          align-items: center;
          background: skyblue;
        }
        
        .stage {
          margin: 20px;
          -webkit-perspective: 1200px;
                  perspective: 1200px;
          -webkit-perspective-origin: 50% 50%;
                  perspective-origin: 50% 50%;
          display: flex;
          position: relative;
          -webkit-animation: wobble 5s ease-in-out infinite;
                  animation: wobble 5s ease-in-out infinite;
          -webkit-animation-direction: alternate;
                  animation-direction: alternate;
          z-index: 2;
          will-change: transform;
        }
        
        .balloon {
          width: 30rem;
          height: 30rem;
          background: #000;
          border-radius: 50%;
          background: radial-gradient(circle at 50% 120%, #81e8f6, purple 10%, #055194 80%, #062745 100%);
        }
        .balloon:before {
          content: "";
          position: absolute;
          top: 1%;
          left: 5%;
          width: 90%;
          height: 90%;
          border-radius: 50%;
          background: radial-gradient(circle at 50% 0px, #ffffff, rgba(255, 255, 255, 0) 58%);
          -webkit-filter: blur(5px);
          z-index: 2;
        }
        .balloon .bottom {
          width: 15%;
          height: 5%;
          background: purple;
          z-index: 100;
          position: absolute;
          -webkit-clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
                  clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
          bottom: -4%;
          left: 0;
          right: 0;
          margin: auto;
        }
        
        .basket {
          width: 6rem;
          height: 4.2857142857rem;
          background: #000;
          border-radius: 10% 10% 15px 15px;
          border: 1px solid #692704;
          box-shadow: inset 0 0 2px #000;
          background: linear-gradient(45deg, #ffd6bf 12%, transparent 0, transparent 88%, #ffd6bf 0), linear-gradient(135deg, transparent 37%, #de9c79 0, #de9c79 63%, transparent 0), linear-gradient(45deg, transparent 37%, #ffd6bf 0, #ffd6bf 63%, transparent 0), #692704;
          background-size: 10px 10px;
          position: absolute;
          left: 0;
          right: 0;
          bottom: -30%;
          margin: auto;
        }
        .basket .top {
          width: 100%;
          height: 50%;
          position: absolute;
          top: -50%;
          border-radius: 5px 5px 0 0;
          border: 2px solid silver;
          border-bottom: none;
        }
        .basket .top .box {
          width: 10%;
          height: 35%;
          background: #a7a7a7;
          position: absolute;
          left: 0;
          right: 0;
          margin: auto;
          top: -35%;
        }
        
        .ropes LI {
          width: 1px;
          position: absolute;
          height: 4.2857142857rem;
          background: #000;
          bottom: -10%;
          z-index: -1;
        }
        .ropes LI:first-child {
          left: 39%;
          -webkit-transform: rotate(-15deg);
                  transform: rotate(-15deg);
        }
        .ropes LI:last-child {
          right: 39%;
          -webkit-transform: rotate(15deg);
                  transform: rotate(15deg);
        }
        .ropes LI::before, .ropes LI:after {
          content: '';
          height: 100%;
          width: 100%;
          background: inherit;
          position: absolute;
        }
        .ropes LI::before {
          left: -200%;
          -webkit-transform: rotate(-15deg) translateX(-350%);
                  transform: rotate(-15deg) translateX(-350%);
        }
        .ropes LI::after {
          right: -200%;
          -webkit-transform: rotate(15deg) translateX(350%);
                  transform: rotate(15deg) translateX(350%);
        }
        
        .flame-wrapper {
          position: relative;
          -webkit-animation: flicker 600ms ease-in infinite;
                  animation: flicker 600ms ease-in infinite;
          width: 0.5rem;
          height: 0.5rem;
        }
        .flame-wrapper .flame {
          bottom: 0;
          left: 0;
          right: 0;
          margin: auto;
          position: absolute;
          border-radius: 50% 0% 50% 50%;
          -webkit-transform: rotate(-45deg);
                  transform: rotate(-45deg);
        }
        .flame-wrapper .flame.red, .flame-wrapper .flame.orange, .flame-wrapper .flame.gold, .flame-wrapper .flame.white {
          left: 0;
          right: 0;
          margin: auto;
        }
        .flame-wrapper .flame.red {
          width: 100%;
          height: 100%;
          background: orangered;
          box-shadow: 0px 0px 2px 1px orangered;
        }
        .flame-wrapper .flame.orange {
          width: 75%;
          height: 75%;
          background: orange;
          box-shadow: 0px 0px 3px 2px orangered;
        }
        .flame-wrapper .flame.gold {
          width: 50%;
          height: 50%;
          background: gold;
          box-shadow: 0px 0px 4px 3px orangered;
        }
        .flame-wrapper .flame.white {
          width: 35%;
          height: 35%;
          background: lightyellow;
          box-shadow: 0px 0px 5px 3px lightyellow;
        }
        
        .cloud {
          width: 10rem;
          height: 10rem;
          background: #fff;
          position: fixed;
          left: 0;
          top: 15%;
          margin: auto;
          border-radius: 50%;
          left: -15vw;
          -webkit-animation: 10s cloud1 ease-in-out infinite;
                  animat.........完整代码请登录后点击上方下载按钮下载查看