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-1v-1"/> <path fill="${a}" d="M 43 3h1v6h-1v-6"/> <path fill="${a}" d="M 8 4h1v6h-1v-6"/> <path fill="${b}" d="M 9 4h1v1h1v1h4v-1h1v-1h1v6h-1v1h-6v-1h-1v-6"/> <path fill="${a}" d="M 10 4h1v1h-1v-1"/> <path fill="${a}" d="M 15 4h1v1h-1v-1"/> <path fill="${a}" d="M 17 4h1v6h-1v-6"/> <path fill="${a}" d="M 37 4h4v1h-4v-1"/> <path fill="${a}" d="M 11 5h4v1h-4v-1"/> <path fill="${c}" d="M 23 6h2v6h-1v-1h-1v-1h-3v-1h1v-1h1v-1h1v-1"/> <path fill="${a}" d="M 36 6h1v2h-1v-2"/> <path fill="${a}" d="M 41 6h1v2h-1v-2"/> <path fill="${c}" d="M 49 6h2v6h-1v-1h-1v-1h-3v-1h1v-1h1v-1h1v-1"/> <path fill="${a}" d="M 10 7h1v2h-1v-2"/> <path fill="${a}" d="M 15 7h1v2h-1v-2"/> <path fill="${a}" d="M 38 8h2v1h-2v-1"/> <path fill="${a}" d="M 12 9h2v1h-2v-1"/> <path fill="${a}" d="M 35 9h1v1h-1v-1"/> <path fill="${a}" d="M 42 9h1v1h-1v-1"/> <path fill="${d}" d="M 5 10h3v1h1v1h1v1h6v-1h1v-1h1v-1h5v1h1v1h1v2h-4v1h1v1h1v1h-1v1h-5v-3h-1v-1h-6v1h-1v3h-6v-1h-1v-1h-1v-3h1v-1h1v-1h2v-1"/> <path fill="${c}" d="M 8 10h1v1h-1v-1"/> <path fill="${a}" d="M 9 10h1v1h-1v-1"/> <path fill="${a}" d="M 16 10h1v1h-1v-1"/> <path fill="${c}" d="M 17 10h1v1h-1v-1"/> <path fill="${d}" d="M 31 10h3v1h1v1h1v1h6v-1h1v-1h1v-1h5v1h1v1h1v2h-4v1h1v1h1v1h-1v1h-5v-3h-1v-1h-6v1h-1v3h-6v-1h-1v-1h-1v-3h1v-1h1v-1h2v-1"/> <path fill="${c}" d="M 34 10h1v1h-1v-1"/> <path fill="${b}" d="M 35 10h1v1h-1v-1"/> <path fill="${a}" d="M 36 10h6v1h-6v-1"/> <path fill="${b}" d="M 42 10h1v1h-1v-1"/> <path fill="${c}" d="M 43 10h1v1h-1v-1"/> <path fill="${c}" d="M 9 11h1v1h-1v-1"/> <path fill="${a}" d="M 10 11h6v1h-6v-1"/> <path fill="${c}" d="M 16 11h1v1h-1v-1"/> <path fill="${c}" d="M 35 11h1v1h-1v-1"/> <path fill="${b}" d="M 36 11h6v1h-6v-1"/> <path fill="${c}" d="M 42 11h1v1h-1v-1"/> <path fill="${c}" d="M 10 12h6v1h-6v-1"/> <path fill="${c}" d="M 36 12h6v1h-6v-1"/> <path fill="${c}" d="M 10 14h6v1h1v7h-1v1h-3v-.........完整代码请登录后点击上方下载按钮下载查看
网友评论0