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

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

代码语言：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;
         .........完整代码请登录后点击上方下载按钮下载查看