css布局实现星球大战飞船千年隼飞行宇宙效果代码-html代码-BFW代码库

css布局实现星球大战飞船千年隼飞行宇宙效果代码

代码语言：html

代码描述：css布局实现星球大战飞船千年隼飞行宇宙效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
        
        :root {
          --falcon-light-color: #e8e8e8;
          --falcon-medium-color: #adadad;
          --falcon-medium-dark-color: #858585;
          --falcon-dark-color: #4c4c4c;
          --falcon-border-color: #050505;
          --falcon-border-filter:
            drop-shadow(-5px 0 0 var(--falcon-border-color))
            drop-shadow(0 -5px 0 var(--falcon-border-color))
            drop-shadow(5px 0 0 var(--falcon-border-color))
            drop-shadow(0 5px 0 var(--falcon-border-color));
        }
        
        body {
          margin: 0;
          background: linear-gradient(#000, #1c1c50);
          height: 100vh;
          overflow: hidden;
        }
        
        .container {
          display: flex;
          justify-content: center;
          margin-top: 15em;
        }
        
        .falcon-container {
          --width-size: 275px;
        
          width: var(--width-size);
          filter: drop-shadow(0 0 5px #fff8);
        }
        
        .falcon-container .back-effects .circle {
            width: var(--width-size);
            height: 275px;
            background: #4c9df4;
            border-radius: 50%;
            -webkit-clip-path: polygon(15% 70%, 85% 70%, 85% 160%, 15% 160%);
                    clip-path: polygon(15% 70%, 85% 70%, 85% 160%, 15% 160%);
            position: absolute;
            transform: translateY(28px);
            filter: blur(2px);
            z-index: 0;
            -webkit-animation: fireEngine 0.5s ease infinite alternate;
                    animation: fireEngine 0.5s ease infinite alternate;
          }
        
        .falcon-container .text {
            font-family: "Bebas Neue", fantasy;
            color: #fff3;
            z-index: 5;
            font-size: 48px;
            text-align: center;
            display: block;
            transform: translate(0, 425px);
            -webkit-text-decoration-color: #77c5;
                    text-decoration-color: #77c5;
            transition: color 0.25s, -webkit-text-decoration-color 0.25s;
            transition: color 0.25s, text-decoration-color 0.25s;
            transition: color 0.25s, text-decoration-color 0.25s, -webkit-text-decoration-color 0.25s;
          }
        
        .falcon-container .text:hover {
              color: #fff;
              -webkit-text-decoration-color: #77c;
                      text-decoration-color: #77c;
            }
        
        .falcon-container .falcon-bottom-container {
            display: flex;
            justify-content: center;
          }
        
        .falcon-container .falcon-bottom-container .escape-pod-shape {
              width: 100px;
              height: 40px;
              position: absolute;
              filter: var(--falcon-border-filter);
            }
        
        .falcon-container .falcon-bottom-container .escape-pod-container {
              --ty: 118px;
        
              width: 100px;
              height: 100%;
              background: var(--falcon-medium-color);
              transform: translate(-85px, var(--ty));
              display: flex;
              justify-content: center;
              align-items: center;
              -webkit-clip-path: polygon(0 20%, 20% 0, 100% 0, 100% 100%, 20% 100%, 0 80%);
                      clip-path: polygon(0 20%, 20% 0, 100% 0, 100% 100%, 20% 100%, 0 80%);
              background-image:
                linear-gradient(to right, transparent 20px, #000 20px 28px, transparent 29px),
                linear-gradient(160deg, var(--falcon-light-color) 13px, transparent 14px),
                linear-gradient(to right, #222 20px, transparent 21px),
                linear-gradient(181deg, var(--falcon-light-color) 6px, transparent 7px);
            }
        
        .falcon-container .falcon-bottom-container .escape-pod-container.right {
                transform: scaleX(-1) translate(-85px, var(--ty));
              }
        
        .falc.........完整代码请登录后点击上方下载按钮下载查看