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;
        }
        
        button:hover {
          color: navy;
          background-color: white;
          cursor: pointer;
        }
        
        textarea {
          padding: 5px 8px;
          border: 0;
          width: 100%;
          height: 80px;
          background-color: rgba(255, 255, 255, 0.4);
          font-family: 'Press Start 2P';
          color: navy;
        }
        
        .sign {
          position: fixed;
          font-family: Arial, Helvetica, sans-serif;
          color: white;
          bottom: 10px;
          right: 10px;
          font-size: 10px;
        }
        
        a {
          color: white;
          text-decoration: none;
        }
        
        a:hover {
          text-decoration: underline;
        }
        
         @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
    </style>

</head>


<body>

    <div class="wrapper pointer-events-none"></div>
    <div class="flex_wrapper pointer-events-none"></div>
    <div class="input_wrapper">
        <div class="inner_wrapper">
            <textarea type="text"></textarea>
            <button>create</button>
        </div>
    </div>

</body>



<script>
    function init() {
    
      const colors = [
      {
        a: 'navy',
        b: '#fff',
        c: '#f3e412',
        d: '#0482d6' },
    
      {
        a: '#f83b3b',
        b: 'pink',
        c: 'yellow',
        d: '#fc65c9' },
    
      {
        a: '#fff',
        b: '#3b3bca',
        c: '#9953f5',
        d: '#67fdf1' },
    
      {
        a: 'navy',
        b: '#a6e1fc',
        c: '#9df312',
        d: '#ffef5d' }];
    
    
    
      const planeSvg = () => {
        const { a, b, c, d } = colors[Math.floor(Math.random() * colors.length)];
        return `<svg x="0px" y="0px" width="100%" height="100%" viewBox="0 0 52 26"><path fill="${a}" d="M 35 2h1v1h-1v-1"/> <path fill="${a}" d="M 42 2h1v1h-1v-1"/> <path fill="${a}" d="M 9 3h1v1h-1v-1"/> <path fill="${a}" d="M 16 3h1v1h-1v-1"/> <path fill="${a}" d="M 34 3h1v6h-1v-6"/> <path fill="${b}" d="M 35 3h1v1h1v1h4v-1h1v-1h1v6h-1v1h-6v-1h-1v-6"/> <path fill="${a}" d="M 36 3h1v1h-1v-1"/> <path fill="${a}" d="M 41 3h1v1h.........完整代码请登录后点击上方下载按钮下载查看