div+css实现一个可旋转三维宇宙飞船效果代码
代码语言:html
所属分类:三维
代码描述:div+css实现一个可旋转三维宇宙飞船效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <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; cursor: pointer; background-image: linear-gradient(to bottom, #1672da, #078dfd, #07b1ff, #00a2ed); } .face { position: absolute; } .flex { display: flex; justify-content: center; align-items: center; } /***********************/ /***********************/ .main { position: absolute; width: 48vmin; height: 50vmin; transform: perspective(600vmin) rotateX(60deg) rotateZ(30deg) translateZ(-16vmin); transition: transform 550ms ease-out; } .wrapper-c1, .wrapper-c2 { width: 100%; height: 100%; position: absolute; } .wrapper-c1 { animation: wrapper-c1 1500ms linear infinite; } .wrapper-c2 { animation: wrapper-c2 1500ms linear infinite; } @keyframes wrapper-c1 { 0%, 10%, 90%, 100% { transform: translateZ(1vmin); } 45%, 55% { transform: translateZ(4.5vmin); } } @keyframes wrapper-c2 { 0%, 50%, 100% { transform: rotateX(0) rotateY(0); } 25% { transform: rotateX(-4deg) rotateY(2deg); } 75% { transform: rotateX(6deg) rotateY(0); } } .wrapper-a { position: absolute; width: 100%; height: 100%; transform: translateZ(2vmin); } .wrapper-b { position: absolute; left: 50%; width: 19vmin; height: 100%; transform: translateX(-50%) translateZ(4vmin); } .shadows { position: absolute; width: 100%; height: 100%; animation: shadow 1500ms linear infinite; } @keyframes shadow { 0%, 10%, 90%, 100% { opacity: 1; transform: scale(1); filter: blur(1.7vmin); } 45%, 55% { opacity: 0.75; transform: scale(0.935); filter: blur(2vmin); } } .shadow { position: absolute; top: 0; border-radius: 4vmin; box-shadow: 0 0 4vmin #296ff0; background-image: radial-gradient(rgba(4, 42, 112, 0.8) 40%, rgba(14, 79, 201, 0.8) 70%); } .shadow-1, .shadow-2 { width: 16vmin; height: 34vmin; } .shadow-1 { left: -1vmin; } .shadow-2 { right: -1vmin; } .shadow-3 { top: 8vmin; left: 50%; width: 22vmin; height: 40vmin; transform: translateX(-50%); } .shadow-4 { top: 8vmin; width: 100%; height: 24vmin; } .shadow-5 { top: 10vmin; left: -15%; width: 130%; height: 8vmin; } .light-1, .light-2, .light-3, .light-4 { top: 28vmin; width: 10vmin; height: 48vmin; border-radius: 50%; box-shadow: 0 0 1vmin #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: -20vmin; width: 14vmin; height: 32vmin; animation: light 94ms linear alternate infinite; } .light-3 { left: 0; } .light-4 { right: 0; } @keyframes light { to { height: 30vmin; transform: translateY(2vmin); } } .wave { position: absolute; border-radius: 50%; animation: wave-size 500ms linear infinite, wave-t 500ms linear infinite; } .wave-2 { animation-delay: 100ms; } .wave-3 { animation-delay: 200ms; } .wave-4 { animation-delay: 300ms; } .wave-4 { animation-delay: 400ms; } @keyframes wave-size { 0% { width: 4vmin; height: 4vmin; border: 0.2vmin solid rgba(107, 255, 255, 0); } 50% { border: 0.6vmin solid rgba(107, 255, 255, 0.25); } 75% { border: 0.6vmin solid rgba(255, 255, 255, 0.25); } 100% { width: 20vmin; height: 20vmin; border: 0.8vmin solid rgba(255, 255, 255, 0); } } @keyframes wave-t { 0% { transform: translateZ(0); } 100% { transform: translateZ(28vmin); } } .a { width: 14vmin; height: 32vmin; position: absolute; } .a__front { width: 14vmin; height: 14vmin; transform-origin: bottom left; transform: rotateX(-90deg) translateZ(18vmin); } .a__back { width: 14vmin; height: 14vmin; transform-origin: top left; transform: rotateX(-90deg) rotateY(180deg) translateX(-14vmin) translateY(-14vmin); } .a__right { width: 32vmin; height: 14vmin; transform-origin: top left; transform: rotateY(90deg) rotateZ(-90deg) translateZ(14vmin) translateX(-32vmin) translateY(-14vmin); } .a__left { width: 32vmin; height: 14vmin; transform-origin: top left; transform: rotateY(-90deg) rotateZ(90deg) translateY(-14vmin); } .a__top { width: 14vmin; height: 32vmin; transform-origin: top left; transform: translateZ(14vmin); } .a__bottom { width: 14vmin; height: 32vmin; transform-origin: top left; transform: rotateY(180deg) translateX(-14vmin); } .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.5vmin #6bffff; border-radius: 2.3vmin; } .a__top::before, .a__top::after, .a__bottom::before, .a__bottom::after { content: ""; position: absolute; width: 2.2vmin; 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 4.825vmin, transparent 4.825vmin), linear-gradient(45deg, transparent 1.05vmin, #016ee7 1.05vmin, #27a2fe), linear-gradient(45deg, #27a2fe 4.825vmin, transparent 4.825vmin), linear-gradient(-45deg, transparent 1.05vmin, #016ee7 1.05vmin, #27a2fe), linear-gradient(to bottom, #27a2fe 50%, #016ee7); } .a:nth-of-type(1) .a__back { background-image: linear-gradient(-45deg, #1d88fe 4.825vmin, transparent 4.825vmin), linear-gradient(45deg, transparent 1.05vmin, #047bfe 1.05vmin, #1d88fe), linear-gradient(45deg, #1d88fe 4.825vmin, transparent 4.825vmin), linear-gradient(-45deg, transparent 1.05vmin, #047bfe 1.05vmin, #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: 5.5vmin; right: 2vmin; width: 6vmin; height: 18vmin; 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.9vmin); } .a:nth-of-type(1) .a__top-neon { position: absolute; left: 50%; transform: translateX(-50%); width: 1vmin; height: 100%; background-color: #85ffff; box-shadow: inset 0 0 0.3vmin #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: 14vmin; width: 8vmin; height: 5vmin; transform-origin: top left; transform: skewX(20deg); background-image: linear-gradient(to bottom, #1d9efe, rgba(39, 162, 254, 0.2)); filter: blur(0.3vmin); } .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 4.825vmin, transparent 4.825vmin), linear-gradient(45deg, transparent 1.05vmin, #0165d3 1.05vmin, #27a2fe), linear-gradient(45deg, #0995fe 4.825vmin, transparent 4.825vmin), linear-gradient(-45deg, transparent 1.05vmin, #0165d3 1.05vmin, #0995fe), linear-gradient(to bottom, #0995fe 50%, #0165d3); } .a:nth-of-type(2) .a__back { background-image: linear-gradient(-45deg, #0e80fe 4.825vmin, transparent 4.825vmin), linear-gradient(45deg, transparent 1.05vmin, #0178fb 1.05vmin, #1d88fe), linear-gradient(45deg, #0e80fe 4.825vmin, transparent 4.825vmin), linear-gradient(-45deg, transparent 1.05vmin, #0178fb 1.05vmin, #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: 5.5vmin; left: 3vmin; width: 6vmin; height: 18vmin; 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(1vmin); } .a:nth-of-type(2) .a__top-neon { position: absolute; left: 50%; transform: translateX(-50%); width: 1vmin; height: 100%; background-color: #6bffff; box-shadow: inset 0 0 0.3vmin #042f7f; } .a:nth-of-type.........完整代码请登录后点击上方下载按钮下载查看
网友评论0