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-contain.........完整代码请登录后点击上方下载按钮下载查看