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

代码语言:html

所属分类:动画

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

代码标签: 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-g.........完整代码请登录后点击上方下载按钮下载查看

网友评论0