js+css实现空中飞机飞行拖动文字横幅留言评论效果代码-html代码-BFW代码库

js+css实现空中飞机飞行拖动文字横幅留言评论效果代码

代码语言：html

代码描述：js+css实现空中飞机飞行拖动文字横幅留言评论效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        * { box-sizing: border-box; }
        
        .pointer-events-none { pointer-events: none; }
        
        body {
          margin: 0;
          padding: 0;
          background-color: #70c3e9;
          font-family: 'Press Start 2P';
        }
        
        .wrapper {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: calc(100% - 100px);
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          margin-top: 50px;
        }
        
        @media screen and (max-height: 320px) {
          .wrapper {
            margin-top: -40px;
          }
        }
        
        .flex_wrapper {
          width: 100%;
          padding-left: calc(20% + 100px);
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          opacity: 0;
        }
        
        .plane_wrapper {
          position: absolute;
          display: flex;
          align-items: center;
        }
        
        .sprite_container {
          position: relative;
          width: 60px;
          height: 60px;
          overflow: hidden;
        }
        
        .sprite {
          position: absolute;
          height: 60px;
          width: 120px;
          transform-origin: center bottom;
        }
        
        .rope {
          margin: 0 -2px 0 -22px;
          height: 60px;
          width: 60px;
          z-index: -1;
          transform-origin: center left;
          transition: 0.4s;
        }
        
        .message_ghost,
        .message {
          height: 30px;
          line-height: 30px;
          background-color: white;
          color: navy;
          padding: 0px 8px;
        }
        
        .module {
          position: relative;
          transition: 0.7s ease-in-out;
        }
        
        .front { display: flex; }
        
        .input_wrapper {
          position: absolute;
          bottom: 50px;
          width: 100%;
          height: 100%;
          display: flex;
          align-items: flex-end;
          justify-content: center;
          z-index: -1;
        }
        
        .inner_wrapper {
          width: calc(100% - 20px);
          max-width: 500px;
          display: flex;
          flex-direction: column;
        }
        
        button {
          padding: 5px 8px;
          border: 0;
          font-family: 'Press Start 2P';
          background-color: navy;
          color: white;
          margin: 8px 0 0 auto;
        }
        
        bu.........完整代码请登录后点击上方下载按钮下载查看