gsap+css实现飞船360度旋转加音乐动画效果代码
代码语言：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 {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 0.5vw;
height: 100%;
background-color: #85ffff;
box-shadow: inset 0 0 0.15vw #042f7f;
}
.a:nth-of-type(1) .a__right {
background-image: linear-gradient(to bottom, transparent 10%, #016ee7 10%, #0160c9 90%, transparent 90%);
}
.a:nth-of-type(1) .a__left {
background-image: linear-gradient(to bottom, transparent 10%, #41ccfe 10%, #14c0fe 90%, transparent 90%);
}
.a:nth-of-type(1) .a__left::before {
content: "";
position: absolute;
bottom: 10%;
right: 7vw;
width: 4vw;
height: 2.5vw;
transform-origin: top left;
transform: skewX(20deg);
background-image: linear-gradient(to bottom, #1d9efe, rgba(39, 162, 254, 0.2));
filter: blur(0.15vw);
}
.a:nth-of-type(1) .a__bottom::before {
background-color: #1d88fe;
}
.a:nth-of-type(1) .a__bottom::after {
background-color: #0f55d7;
}
.a:nth-of-type(2) {
right: 0;
}
.a:nth-of-type(2) .a__front {
background-image: linear-gradient(-45deg, #0995fe 2.4125vw, transparent 2.4125vw), linear-gradient(45deg, transparent 0.525vw, #0165d3 0.525vw, #27a2fe), linear-gradient(45deg, #0995fe 2.4125vw, transparent 2.4125vw), linear-gradient(-45deg, transparent 0.525vw, #0165d3 0.525vw, #0995fe), linear-gradient(to bottom, #0995fe 50%, #0165d3);
}
.a:nth-of-type(2) .a__back {
background-image: linear-gradient(-45deg, #0e80fe 2.4125vw, transparent 2.4125vw), linear-gradient(45deg, transparent 0.525vw, #0178fb 0.525vw, #1d88fe), linear-gradient(45deg, #0e80fe 2.4125vw, transparent 2.4125vw), linear-gradient(-45deg, transparent 0.525vw, #0178fb 0.525vw, #1d88fe), linear-gradient(to bottom, #0e80fe 50%, #0178fb);
}
.a:nth-of-type(2) .a__top {
background-image: linear-gradient(60deg, rgba(39, 162, 254, 0.8), rgba(39, 162, 254, 0.45) 48%, transparent 50%), linear-gradient(to right, transparent 10%, #32c8fe 10%, #1ec3fe 90%, transparent 90%);
background-size: 80% 100%, 100% 100%;
background-position: 52% 0, 0 0;
background-repeat: no-repeat;
}
.a:nth-of-type(2) .a__top::before {
background-image: linear-gradient(to right, #27a2fe, #1d88fe);
}
.a:nth-of-type(2) .a__top::after {
background-image: linear-gradient(to left, #19c1fe, #1d88fe);
}
.a:nth-of-type(2) .a__top-shadow {
top: 2.75vw;
left: 1.5vw;
width: 3vw;
height: 9vw;
transform-origin: bottom left;
transform: skewY(40deg) translateZ(1px);
background-image: linear-gradient(to right, rgba(107, 255, 255, 0.1), rgba(107, 255, 255, 0.315), rgba(107, 255, 255, 0.215));
filter: blur(0.5vw);
}
.a:nth-of-type(2) .a__top-neon {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 0.5vw;
height: 100%;
background-color: #6bffff;
box-shadow: inset 0 0 0.15vw #042f7f;
}
.a:nth-of-type(2) .a__right {
background-image: linear-gradient(to bottom, transparent 10%, #0e80fe 10%, #0167d8 90%, transparent 90%);
}
.a:nth-of-type(2) .a__right::before {
content: "";
position: absolute;
bottom: 10%;
left: 7vw;
width: 4vw;
height: 2.5vw;
transform-origin: top left;
transform: skewX(-20deg);
background-image: linear-gradient(to bottom, rgba(15, 85, 215, 0.9), rgba(15, 85, 215, 0.2));
filter: blur(0.15vw);
}
.a:nth-of-type(2) .a__left {
background-image: linear-gradient(to bottom, transparent 10%, #1383fe 10%, #0162ce 90%, transparent 90%);
}
.a:nth-of-type(2) .a__bottom::before {
background-color: #0f55d7;
}
.a:nth-of-type(2) .a__bottom::after {
background-color: #0f55d7;
}
.b {
width: 9.5vw;
height: 10vw;
position: absolute;
top: 2.1vw;
}
.b__front {
width: 9.5vw;
height: 10vw;
transform-origin: bottom left;
transform: rotateX(-90deg) translateZ(0vw);
}
.b__back {
width: 9.5vw;
height: 10vw;
transform-origin: top left;
transform: rotateX(-90deg) rotateY(180deg) translateX(-9.5vw) translateY(-10vw);
}
.b__right {
width: 10vw;
height: 10vw;
transform-origin: top left;
transform: rotateY(90deg) rotateZ(-90deg) translateZ(9.5vw) translateX(-10vw) translateY(-10vw);
}
.b__left {
width: 10vw;
height: 10vw;
transform-origin: top left;
transform: rotateY(-90deg) rotateZ(90deg) translateY(-10vw);
}
.b__top {
width: 9.5vw;
height: 10vw;
transform-origin: top left;
transform: translateZ(10vw);
}
.b__bottom {
width: 9.5vw;
height: 10vw;
transform-origin: top left;
transform: rotateY(180deg) translateX(-9.5vw);
}
.b__front {
background-color: #042f7f;
}
.b__back {
background-image: linear-gradient(to bottom, #3193fe, #1d88fe 20%, #016add);
}
.b__back::before {
content: "";
position.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0