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

代码语言：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));
              }
        
        .falcon-container .falcon-bottom-container .escape-pod-container .escape-pod {
                display: flex;
                width: 50%;
                justify-content: space-between;
                align-items: center;
                margin-left: 25px;
              }
        
        .falcon-container .falcon-bottom-container .escape-pod-container .escape-pod .dot {
                  --size: 10px;
        
                  width: var(--size);
                  height: var(--size);
                  border-radius: 50%;
                  background: #222;
                }
        
        .falcon-container .falcon-bottom-container .escape-pod-container .escape-pod .dot:nth-child(2) { --size: 8px; }
        
        .falcon-container .falcon-bottom-container .escape-pod-container .escape-pod .dot:nth-child(3) { --size: 6px; }
        
        .falcon-container .falcon-bottom-container .escape-pod-container.right .dot { --size: 8px; }
        
        .falcon-container .falcon-bottom-container .escape-pod-container.right .escape-pod { margin-left: 55px; }
        
        .falcon-container .falcon-shape-container {
            width: var(--width-size);
            position: relative;
            filter: var(--falcon-border-filter);
          }
        
        .falcon-container .falcon-shape-container .mandibles {
              width: 100px;
              height: 185px;
              background: var(--falcon-medium-color);
              background-image:
                linear-gradient(113deg, var(--falcon-light-color) 48%, transparent 49%),
                linear-gradient(180deg, var(--falcon-light-color) 4%, transparent 5%);
              position: absolute;
              -webkit-clip-path: polygon(0 100%, 80% 0, 100% 0, 100% 100%);
                      clip-path: polygon(0 100%, 80% 0, 100% 0, 100% 100%);
              transform: translate(20px, -115px);
            }
        
        .falcon-container .falcon-shape-container .mandibles .hole-1 { transform: translate(68px, 45px); }
        
        .falcon-container .falcon-shape-container .mandibles .hole-2 { transform: translate(50px, 67px); }
        
        .falcon-container .falcon-shape-container .mandibles.right {
                transform: translate(155px, -115px) scaleX(-1);
              }
        
        .falcon-container .falcon-shape-container .circle {
              width: var(--width-size);
              height: 275px;
              background: var(--falcon-medium-color);
              background-image: radial-gradient(circle at 50% 53%, transparent 67%, var(--falcon-light-color) 68%);
              border-radius: 50%;
              -webkit-clip-path: polygon(0 0, 100% 0, 100% 38%, 62% 42%, 62% 58%, 100% 62%, 100% 100%, 0 100%, 0 62%, 38% 58%, 38% 42%, 0 38%);
                      clip-path: polygon(0 0, 100% 0, 100% 38%, 62% 42%, 62% 58%, 100% 62%, 100% 100%, 0 100%, 0 62%, 38% 58%, 38% 42%, 0 38%);
              position: absolute;
              z-index: 2;
              display: flex;
              justify-content: center;
              align-items: center;
            }
        
        .falcon-container .falcon-shape-container .circle::before,
              .falcon-container .falcon-shape-container .circle::after {
                content: "";
                display: block;
                width: 4px;
                height: 85%;
                background: var(--falcon-medium-dark-color);
                position: absolute;
                z-index: -1;
              }
        
        .falcon-container .falcon-shape-container .circle::before { transform: rotate(45deg); }
        
        .falcon-container .falcon-shape-container .circle::after { transform: rotate(-45deg); }
        
        .falcon-container .falcon-shape-container .circle .core {
                width: 50px;
                height: 50px;
                border: 4px solid var(--falcon-border-color);
                border-radius: 50%;
                display: flex;
                justify-content: center;
                background-color: var(--falcon-medium-color);
                background-image:
                  conic-gradient(var(--falcon-medium-color) 50%, transparent 52% 75%, var(--falcon-medium-color) 77%),
                  radial-gradient(transparent 50%, #fff 55% 60%, transparent 64%);
              }
        
        .falcon-container .falcon-shape-container .circle .core .turret {
                  width: 20px;
                  height: 14px;
                  border-radius: 0 0 10px 10px;
                  background: var(--falcon-border-color);
                  -webkit-animation: moveTurret 10s linear infinite alternate;
                          animation: moveTurret 10s linear infinite alternate;
                }
        
        .falcon-container .falcon-shape-container .circle .core .turret::before,
                  .falcon-container .falcon-shape-container .circle .core .turret::after {
                    content: "";
                    display: block;
                    background: var(--falcon-border-color);
                    width: 4px;
                    height: 30px;
                    transform: translate(4px, -25px);
                    position: absolute;
                  }
        
        .falcon-container .falcon-shape-container .circle .core .turret::before {
                    transform: translate(12px, -25px);
                  }
        
        .falcon-container .falcon-shape-container .engines {
              width: var(--width-size);
              height: 275px;
              background: var(--falcon-medium-color);
              background-image: radial-gradient(var(--falcon-medium-dark-color) 65%, transparent 66% 68%, var(--falcon-light-color) 69%);
              border-radius: 50%;
              -webkit-clip-path: polygon(15% 60%, 85% 60%, 85% 100%, 15% 100%);
                      clip-path: polygon(15% 60%, 85% 60%, 85% 100%, 15% 100%);
              position: absolute;
              transform: translateY(15px);
            }
        
        .falcon-container .falcon-top-container {
            display: flex;
            flex-direction: column;
            align-items: center;
          }
        
        .falcon-container .falcon-top-container .missile-tubes-container {
              filter: var(--falcon-border-filter);
              width: 40px;
            }
        
        .falcon-container .falcon-top-container .missile-tubes-container .missile-tubes {
                width: 40px;
                height: 125px;
                background: var(--falcon-medium-dark-color);
                background-image: linear-gradient(to bottom, var(--falcon-medium-color) 5%, transparent 6%);
                position: absolute;
                transform: translate(0, -50px);
                -webkit-clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
                        clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
              }
        
        .falcon-container .falcon-top-container .top-part {
              width: 200px;
              height: 100px;
              position: absolute;
              z-index: 3;
            }
        
        .falcon-container .falcon-top-container .top-part .antenna {
                position: relative;
                transform: translate(14px, 60px) rotate(-30deg);
                transform-origin: 20px 20px;
                -webkit-animation: moveAntenna 6s linear infinite alternate;
                        animation: moveAntenna 6s linear infinite alternate;
              }
        
        .falcon-container .falcon-top-container .top-part .antenna .core {
                  width: 25px;
                  height: 25px;
                  background: var(--falcon-dark-color);
                  border-radius: 50%;
                  border: 4px solid #111;
                  position: absolute;
                }
        
        .falcon-container .falcon-top-container .top-part .antenna .neck {
                  width: 10px;
                  height: 10px;
                  background: #111;
                  border-radius: 50%;
                  transform: translate(10px, 0);
                  position: absolute;
                }
        
        .falcon-container .falcon-top-container .top-part .antenna .parabolic {
                  width: 40px;
                  height: 20px;
                  background: #eee;
                  border-radius: 50%;
      .........完整代码请登录后点击上方下载按钮下载查看