gsap+css实现飞船360度旋转加音乐动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：gsap+css实现飞船360度旋转加音乐动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">



    <style>
        /***********************/
        /***********************/
        /***********************/
        *, *::after, *::before {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
          transform-style: preserve-3d;
          user-select: none;
          -webkit-tap-highlight-color: transparent;
          appearance: none;
          font-family: "Press Start 2P", cursive;
        }
        
        /***********************/
        /***********************/
        body {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100vh;
          width: 100%;
          color: #1d88fe;
          font-weight: bolder;
          overflow: hidden;
          background-image: linear-gradient(to bottom, #1672da, #078dfd, #07b1ff, #00a2ed);
        }
        
        .face {
          position: absolute;
        }
        
        .flex {
          display: flex;
          justify-content: center;
          align-items: center;
        }
        
        .svg-icon {
          position: absolute;
          left: 50%;
          bottom: 50px;
          width: 50px;
          height: 50px;
          z-index: 1;
          opacity: 0.65;
          transform: translateX(-50%);
          cursor: pointer;
        }
        .svg-icon:hover {
          opacity: 0.9;
        }
        
        .svg-icon path,
        .svg-icon polygon,
        .svg-icon rect {
          fill: white;
        }
        
        .svg-icon circle {
          stroke: white;
          stroke-width: 1;
        }
        
        /***********************/
        /***********************/
        .main {
          position: absolute;
          width: 24vw;
          height: 25vw;
          transform: perspective(300vw) rotateX(60deg) rotateZ(30deg) translateZ(-8vw);
          transition: transform 550ms ease-out;
        }
        .main-rotate {
          position: absolute;
          width: 100%;
          height: 100%;
        }
        
        .wrapper-c1,
        .wrapper-c2 {
          width: 100%;
          height: 100%;
          position: absolute;
        }
        
        .wrapper-a {
          position: absolute;
          width: 100%;
          height: 100%;
          transform: translateZ(1vw);
        }
        
        .wrapper-b {
          position: absolute;
          left: 50%;
          width: 9.5vw;
          height: 100%;
          transform: translateX(-50%) translateZ(2vw);
        }
        
        .shadows {
          position: absolute;
          width: 100%;
          height: 100%;
          filter: blur(0.85vw);
        }
        
        .shadow {
          position: absolute;
          top: 0;
          border-radius: 2vw;
          box-shadow: 0 0 2vw #296ff0;
          background-image: radial-gradient(rgba(4, 42, 112, 0.8) 40%, rgba(14, 79, 201, 0.8) 70%);
        }
        
        .shadow-1,
        .shadow-2 {
          width: 8vw;
          height: 17vw;
        }
        
        .shadow-1 {
          left: -0.5vw;
        }
        
        .shadow-2 {
          right: -0.5vw;
        }
        
        .shadow-3 {
          top: 4vw;
          left: 50%;
          width: 11vw;
          height: 20vw;
          transform: translateX(-50%);
        }
        
        .shadow-4 {
          top: 4vw;
          width: 100%;
          height: 12vw;
        }
        
        .shadow-5 {
          top: 5vw;
          left: -15%;
          width: 130%;
          height: 4vw;
        }
        
        .light-1,
        .light-2,
        .light-3,
        .light-4 {
          top: 14vw;
          width: 5vw;
          height: 24vw;
          border-radius: 50%;
          box-shadow: 0 0 0.5vw #9effff;
          background-image: linear-gradient(to bottom, rgba(107, 255, 255, 0.185), rgba(107, 255, 255, 0.4) 20%, rgba(107, 255, 255, 0.25) 60%, rgba(107, 255, 255, 0.05));
        }
        
        .light-1 {
          left: 0;
        }
        
        .light-2 {
          right: 0;
        }
        
        .light-3,
        .light-4 {
          top: -10vw;
          width: 7vw;
          height: 16vw;
        }
        
        .light-3 {
          left: 0;
        }
        
        .light-4 {
          right: 0;
        }
        
        .wave {
          position: absolute;
          border-radius: 50%;
        }
        
        .a {
          width: 7vw;
          height: 16vw;
          position: absolute;
        }
        .a__front {
          width: 7vw;
          height: 7vw;
          transform-origin: bottom left;
          transform: rotateX(-90deg) translateZ(9vw);
        }
        .a__back {
          width: 7vw;
          height: 7vw;
          transform-origin: top left;
          transform: rotateX(-90deg) rotateY(180deg) translateX(-7vw) translateY(-7vw);
        }
        .a__right {
          width: 16vw;
          height: 7vw;
          transform-origin: top left;
          transform: rotateY(90deg) rotateZ(-90deg) translateZ(7vw) translateX(-16vw) translateY(-7vw);
        }
        .a__left {
          width: 16vw;
          height: 7vw;
          transform-origin: top left;
          transform: rotateY(-90deg) rotateZ(90deg) translateY(-7vw);
        }
        .a__top {
          width: 7vw;
          height: 16vw;
          transform-origin: top left;
          transform: translateZ(7vw);
        }
        .a__bottom {
          width: 7vw;
          height: 16vw;
          transform-origin: top left;
          transform: rotateY(180deg) translateX(-7vw);
        }
        .a__front, .a__back {
          background-position: 0 0, 0 100%, 100% 0, 100% 100%, 49% 0;
          background-size: 10% 50%, 10% 50%, 10% 50%, 10% 50%, 82% 100%;
          background-repeat: no-repeat;
        }
        .a__back {
          box-shadow: inset 0 0 0 0.25vw #6bffff;
          border-radius: 1.15vw;
        }
        .a__top::before, .a__top::after, .a__bottom::before, .a__bottom::after {
          content: "";
          position: absolute;
          width: 1.1vw;
          height: 100%;
        }
        .a__top::before, .a__bottom::before {
          left: 89%;
          transform-origin: left;
          transform: rotateY(45deg);
        }
        .a__top::after, .a__bottom::after {
          right: 89%;
          transform-origin: right;
          transform: rotateY(-45deg);
        }
        .a__bottom {
          background-image: linear-gradient(to right, transparent 10%, #0f55d7 10%, #0e4dc4 90%, transparent 90%);
        }
        .a:nth-of-type(1) {
          left: 0;
        }
        .a:nth-of-type(1) .a__front {
          background-image: linear-gradient(-45deg, #27a2fe 2.4125vw, transparent 2.4125vw), linear-gradient(45deg, transparent 0.525vw, #016ee7 0.525vw, #27a2fe), linear-gradient(45deg, #27a2fe 2.4125vw, transparent 2.4125vw), linear-gradient(-45deg, transparent 0.525vw, #016ee7 0.525vw, #27a2fe), linear-gradient(to bottom, #27a2fe 50%, #016ee7);
        }
        .a:nth-of-type(1) .a__back {
          background-image: linear-gradient(-45deg, #1d88fe 2.4125vw, transparent 2.4125vw), linear-gradient(45deg, transparent 0.525vw, #047bfe 0.525vw, #1d88fe), linear-gradient(45deg, #1d88fe 2.4125vw, transparent 2.4125vw), linear-gradient(-45deg, transparent 0.525vw, #047bfe 0.525vw, #1d88fe), linear-gradient(to bottom, #1d88fe 50%, #047bfe);
        }
        .a:nth-of-type(1) .a__top {
          background-image: linear-gradient(to right, transparent 10%, #46cdfe 10%, #1ec3fe 90%, transparent 90%);
        }
        .a:nth-of-type(1) .a__top::before {
          background-color: #2ca4fe;
        }
        .a:nth-of-type(1) .a__top::after {
          background-color: #4bcffe;
        }
        .a:nth-of-type(1) .a__top-shadow {
          top: 2.75vw;
          right: 1vw;
          width: 3vw;
          height: 9vw;
          transform-origin: bottom right;
          transform: skewY(-40deg) translateZ(1px);
          background-image: linear-gradient(to left, rgba(50, 200, 254, 0.6), rgba(107, 255, 255, 0.4), rgba(107, 255, 255, 0.2));
          filter: blur(0.45vw);
        }
        .a:nth-of-type(1) .a__top-neon.........完整代码请登录后点击上方下载按钮下载查看