纯css实现3d汽车360度旋转动画效果
代码语言：html
所属分类：三维
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSSYBERTRUCK</title>
<style>
*, *:before, *:after {
box-sizing: border-box;
position: relative;
-webkit-animation-play-state: var(--play-state, paused) !important;
animation-play-state: var(--play-state, paused) !important;
}
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
:root {
--color-top: #E7EEF6;
--color-glass: rgba(0, 0, 0, 0.6);
--c-top: #DAE0E4;
--c-side: #778189;
--c-bottom: #444246;
--c-bumper: #111;
--speed: 2s;
--duration: 30s;
}
label[for="animation"] {
position: absolute;
height: 2rem;
color: white;
top: 0;
left: calc(1.5rem + 20px);
line-height: 2rem;
text-transform: uppercase;
font-size: 0.8rem;
letter-spacing: 1px;
}
#animation {
position: absolute;
width: 20px;
height: 2rem;
top: 0;
left: 1rem;
}
label[for="animation"], #animation {
opacity: 0.3;
transition: opacity .3s;
cursor: pointer;
}
label[for="animation"]:hover, #animation:hover {
opacity: 0.9;
}
#animation:checked ~ * {
--play-state: 'running';
}
#cybertruck {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: visible;
backface-visibility: visible;
--ry: 0deg;
width: 340px;
height: 930px;
-webkit-transform: rotateX(80deg) rotateZ(calc(var(--rz, 0) * 1turn));
transform: rotateX(80deg) rotateZ(calc(var(--rz, 0) * 1turn));
-webkit-animation: cybertruck var(--duration) linear infinite;
animation: cybertruck var(--duration) linear infinite;
-webkit-animation-play-state: paused;
animation-play-state: paused;
-webkit-animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
@-webkit-keyframes cybertruck {
from {
-webkit-transform: rotateX(80deg) rotateZ(0turn);
transform: rotateX(80deg) rotateZ(0turn);
}
to {
-webkit-transform: rotateX(80deg) rotateZ(1turn);
transform: rotateX(80deg) rotateZ(1turn);
}
}
@keyframes cybertruck {
from {
-webkit-transform: rotateX(80deg) rotateZ(0turn);
transform: rotateX(80deg) rotateZ(0turn);
}
to {
-webkit-transform: rotateX(80deg) rotateZ(1turn);
transform: rotateX(80deg) rotateZ(1turn);
}
}
#cybertruck .highlight {
border-left: 5px solid green;
border-top: 5px solid red;
}
#cybertruck:before {
content: '';
position: absolute;
top: 10%;
left: 50%;
width: 0;
height: 100%;
-webkit-transform: translateZ(-195px) scale(3, 1.2);
transform: translateZ(-195px) scale(3, 1.2);
box-shadow: 0 0 150px 50px rgba(0, 0, 0, 0.5);
}
.side {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: visible;
backface-visibility: visible;
position: absolute;
top: 0;
width: 140px;
height: 930px;
left: 0;
-webkit-transform-origin: left top;
transform-origin: left top;
-webkit-transform: rotateY(var(--ry)) translateX(-100%) rotateZ(-2deg);
transform: rotateY(var(--ry)) translateX(-100%) rotateZ(-2deg);
}
.side.-left {
--ry: -90deg;
}
.side.-left:before {
-webkit-animation: side-left var(--duration) linear infinite;
animation: side-left var(--duration) linear infinite;
-webkit-animation-play-state: paused;
animation-play-state: paused;
-webkit-animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
}
@-webkit-keyframes side-left {
from, to {
background: #8B898D;
border-color: #4D5055;
}
50% {
background: #A0A5A9;
border-color: #5D6369;
}
75% {
background: #676E76;
border-color: #454244;
}
}
@keyframes side-left {
from, to {
background: #8B898D;
border-color: #4D5055;
}
50% {
background: #A0A5A9;
border-color: #5D6369;
}
75% {
background: #676E76;
border-color: #454244;
}
}
.side.-right {
--ry: -90deg;
}
.side.-right:before {
-webkit-animation: side-right var(--duration) linear infinite;
animation: side-right var(--duration) linear infinite;
-webkit-animation-play-state: paused;
animation-play-state: paused;
-webkit-animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
}
@-webkit-keyframes side-right {
from, to {
background: #7C726F;
border-color: #73645B;
}
25% {
background: #4B5665;
border-color: #34373E;
}
50%, 75% {
background: #545A61;
border-color: #454952;
}
}
@keyframes side-right {
from, to {
background: #7C726F;
border-color: #73645B;
}
25% {
background: #4B5665;
border-color: #34373E;
}
50%, 75% {
background: #545A61;
border-color: #454952;
}
}
.side:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--c-side);
border-left: 50px solid;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 40px 905px, 40px 820px, 90px 785px, 90px 695px, 30px 645px, 0px 635px, 0px 210px, 30px 200px, 115px 155px, 115px 45px, 50px 21px, 100% 0, 0px 0%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 40px 905px, 40px 820px, 90px 785px, 90px 695px, 30px 645px, 0px 635px, 0px 210px, 30px 200px, 115px 155px, 115px 45px, 50px 21px, 100% 0, 0px 0%);
}
.side.-right {
left: 100%;
}
.side.-right > .bumper {
-webkit-transform: translateZ(-5px);
transform: translateZ(-5px);
}
.side > .bumper {
position: absolute;
left: 0;
bottom: 280px;
height: 450px;
width: 25px;
background-color: var(--c-bumper);
-webkit-transform: translateZ(5px);
transform: translateZ(5px);
-webkit-clip-path: polygon(0 10px, 100% 0, 100% 100%, 0 calc(100% - 10px));
clip-path: polygon(0 10px, 100% 0, 100% 100%, 0 calc(100% - 10px));
}
.side.-left .bumper {
-webkit-animation: side-left-bumper var(--duration) linear infinite;
animation: side-left-bumper var(--duration) linear infinite;
-webkit-animation-play-state: paused;
animation-play-state: paused;
-webkit-animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
}
@-webkit-keyframes side-left-bumper {
from, to, 50% {
background: #3F4245;
}
75%, 80% {
background: #000;
}
90% {
background: #2C2C2D;
}
}
@keyframes side-left-bumper {
from, to, 50% {
background: #3F4245;
}
75%, 80% {
background: #000;
}
90% {
background: #2C2C2D;
}
}
.side.-right .bumper {
-webkit-animation: side-right-bumper var(--duration) linear infinite;
animation: side-right-bumper var(--duration) linear infinite;
-webkit-animation-play-state: paused;
animation-play-state: paused;
-webkit-animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
}
@-webkit-keyframes side-right-bumper {
from, to {
background: #3F3129;
}
25% {
background: #000;
}
50% {
background: #34343C;
}
}
@keyframes side-right-bumper {
from, to {
background: #3F3129;
}
25% {
background: #000;
}
50% {
background: #34343C;
}
}
.well {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: visible;
backface-visibility: visible;
height: 100px;
position: absolute;
width: 20px;
--ry: 30deg;
}
.well.-front {
left: 105px;
top: 50px;
}
.well.-back {
left: 80px;
top: 685px;
}
.well:before, .well:after, .well .well-plate {
background-color: var(--c-bumper);
}
.well:before, .well:after {
content: '';
position: absolute;
left: 0;
width: 100%;
height: 100%;
}
.well:before {
bottom: 100%;
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-clip-path: polygon(0 calc(100% - 10px), 0 0, 100% 0%, 100% 100%);
clip-path: polygon(0 calc(100% - 10px), 0 0, 100% 0%, 100% 100%);
}
.well:after {
top: 100%;
-webkit-transform-origin: top right;
transform-origin: top right;
-webkit-clip-path: polygon(0 10px, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(0 10px, 100% 0, 100% 100%, 0 100%);
}
.well > .well-plate {
-webkit-transform-origin: right center;
transform-origin: right center;
-webkit-transform: rotateY(var(--ry));
transform: rotateY(var(--ry));
-webkit-clip-path: polygon(0 10px, 100% 0, 100% 100%, 0 calc(100% - 10px));
clip-path: polygon(0 10px, 100% 0, 100% 100%, 0 calc(100% - 10px));
}
.well.-front:before {
-webkit-transform: rotateZ(-60deg) rotateY(var(--ry));
transform: rotateZ(-60deg) rotateY(var(--ry));
-webkit-clip-path: polygon(0 calc(100% - 10px), 0 40px, 100% 0%, 100% 100%);
clip-path: polygon(0 calc(100% - 10px), 0 40px, 100% 0%, 100% 100%);
}
.well.-front:after {
height: 140px;
-webkit-transform: rotateZ(60deg) rotateY(var(--ry));
transform: rotateZ(60deg) rotateY(var(--ry));
-webkit-clip-path: polygon(0 10px, 100% 0px, 100% 100%, 10px 100%, 0 calc(100% - 40px));
clip-path: polygon(0 10px, 100% 0px, 100% 100%, 10px 100%, 0 calc(100% - 40px));
}
.well.-back:before {
height: 110px;
-webkit-transform: rotateZ(-60deg) rotateY(var(--ry));
transform: rotateZ(-60deg) rotateY(var(--ry));
-webkit-clip-path: polygon(0 calc(100% - 10px), 0 45px, 100% 0%, 100% 100%);
clip-path: polygon(0 calc(100% - 10px), 0 45px, 100% 0%, 100% 100%);
}
.well.-back:after {
height: 100px;
-webkit-transform: rotateZ(60deg) rotateY(var(--ry));
transform: rotateZ(60deg) rotateY(var(--ry));
-webkit-clip-path: polygon(100% 100%, 0% calc(100% - 45px), 0% 10px, 100% 0%);
clip-path: polygon(100% 100%, 0% calc(100% - 45px), 0% 10px, 100% 0%);
}
.side.-right .well {
--ry: -30deg;
}
.side.-left .well:after {
-webkit-animation: left-well-back-after var(--duration) linear infinite;
animation: left-well-back-after var(--duration) linear infinite;
-webkit-animation-play-state: paused;
animation-play-state: paused;
-webkit-animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
}
@-webkit-keyframes left-well-back-after {
from, to {
background: #373438;
}
25%, 90% {
background: #000;
}
}
@keyframes left-well-back-after {
from, to {
background: #373438;
}
25%, 90% {
background: #000;
}
}
.side.-left .well .well-plate {
-webkit-animation: left-well-plate var(--duration) linear infinite;
animation: left-well-plate var(--duration) linear infinite;
-webkit-animation-play-state: paused;
animation-play-state: paused;
-webkit-animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
}
@-webkit-keyframes left-well-plate {
from, to, 25% {
background: #717476;
}
50% {
background: #6D7174;
}
75% {
background: #000;
}
}
@keyframes left-well-plate {
from, to, 25% {
background: #717476;
}
50% {
background: #6D7174;
}
75% {
background: #000;
}
}
.side.-left .well:before {
-webkit-animation: left-well-back-before var(--duration) linear infinite;
animation: left-well-back-before var(--duration) linear infinite;
-webkit-animation-play-state: paused;
animation-play-state: paused;
-webkit-animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
}
@-webkit-keyframes left-well-back-before {
from, to {
background: #000;
}
50% {
background: #747C7D;
}
55% {
background: #909798;
}
75% {
background: #000;
}
}
@keyframes left-well-back-before {
from, to {
background: #000;
}
50% {
background: #747C7D;
}
55% {
background: #909798;
}
75% {
background: #000;
}
}
.side.-right .well:after {
-webkit-animation: right-well-back-after var(--duration) linear infinite;
animation: right-well-back-after var(--duration) linear infinite;
-webkit-animation-play-state: paused;
animation-play-state: paused;
-webkit-animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
}
@-webkit-keyframes right-well-back-after {
from, to, 25% {
background: #000;
}
30% {
background: #3A3F41;
}
}
@keyframes right-well-back-after {
from, to, 25% {
background: #000;
}
30% {
background: #3A3F41;
}
}
.side.-right .well .well-plate {
-webkit-animation: right-well-plate var(--duration) linear infinite;
animation: right-well-plate var(--duration) linear infinite;
-webkit-animation-play-state: paused;
animation-play-state: paused;
-webkit-animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
}
@-webkit-keyframes right-well-plate {
from, to {
background: #616263;
}
25% {
background: #000;
}
50% {
background: #42474B;
}
}
@keyframes right-well-plate {
from, to {
background: #616263;
}
25% {
background: #000;
}
50% {
background: #42474B;
}
}
.side.-right .well:before {
-webkit-animation: right-well-back-before var(--duration) linear infinite;
animation: right-well-back-before var(--duration) linear infinite;
-webkit-animation-play-state: paused;
animation-play-state: paused;
-webkit-animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
}
@-webkit-keyframes right-well-back-before {
from, to {
background: #000;
}
20% {
background: #202225;
}
30% {
background: #000;
}
50% {
background: #14161A;
}
}
@keyframes right-well-back-before {
from, to {
background: #000;
}
20% {
background: #202225;
}
30% {
background: #000;
}
50% {
background: #14161A;
}
}
.well-plate {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.top-side {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 105px;
-webkit-transform-origin: right;
transform-origin: right;
-webkit-transform: rotateY(160deg);
transform: rotateY(160deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.top-side:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-clip-path: polygon(100% 100%, 100% 0%, 0% 410px, 10px 410px, 85px 110px, 85px 590px, 45px 585px, 10px 410px, 0 410px);
clip-path: polygon(100% 100%, 100% 0%, 0% 410px, 10px 410px, 85px 110px, 85px 590px, 45px 585px, 10px 410px, 0 410px);
z-index: 2;
}
.side.-left > .top-side {
-webkit-transform: rotateY(-160deg);
transform: rotateY(-160deg);
}
.side.-left > .top-side:before {
-webkit-animation: top-side-left var(--duration) linear infinite;
animation: top-side-left var(--duration) linear infinite;
-webkit-animation-play-state: paused;
animation-play-state: paused;
-webkit-animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
}
@-webkit-keyframes top-side-left {
from, to, 25% {
background: #9A9DA2;
}
50% {
background: #9DA3A8;
}
75% {
background: white;
}
}
@keyframes top-side-left {
from, to, 25% {
background: #9A9DA2;
}
50% {
background: #9DA3A8;
}
75% {
background: white;
}
}
.side.-right > .top-side:before {
-webkit-animation: top-side-right var(--duration) linear infinite;
animation: top-side-right var(--duration) linear infinite;
-webkit-animation-play-state: paused;
animation-play-state: paused;
-webkit-animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
}
@-webkit-keyframes top-side-right {
from, to {
background: #878688;
}
25% {
background: #737D86;
}
50%, 75% {
background: #676D74;
}
}
@keyframes top-side-right {
from, to {
background: #878688;
}
25% {
background: #737D86;
}
50%, 75% {
background: #676D74;
}
}
.ball-bearing,
.windows {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.ball-bearing {
z-index: 2;
opacity: 0;
}
.windows {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: visible;
backface-visibility: visible;
-webkit-transform-origin: left;
transform-origin: left;
-webkit-clip-path: polygon(85px 100px, 10px 410px, 45px 585px, 85px 590px);
clip-path: polygon(85px 100px, 10px 410px, 45px 585px, 85px 590px);
-webkit-transform: rotateY(5deg);
transform: rotateY(5deg);
background: rgba(0, 0, 0, 0.5);
}
.side.-left .windows {
-webkit-transform: rotateY(-5deg);
transform: rotateY(-5deg);
}
.window {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.window:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.window.-driver {
position: absolute;
top: 220px;
left: 0;
width: 100%;
height: 200px;
background: linear-gradient(to bottom, #000, #000 20px, transparent 20px, transparent calc(100% - 20px), #000 calc(100% - 20px), #000);
}
.window.-passenger {
position: absolute;
top: 420px;
left: 0;
width: 100%;
height: 170px;
background: linear-gradient(to bottom, transparent, transparent 20px, transparent calc(100% - 20px), #000 calc(100% - 20px), #000);
}
.door {
position: absolute;
height: 200px;
width: 100%;
border-top: 2px solid rgba(0, 0, 0, 0.1);
border-bottom: 2px solid rgba(0, 0, 0, 0.1);
}
.door.-front {
top: 215px;
left: 0;
border-bottom: none;
}
.door.-back {
top: 415px;
left: 0;
height: 185px;
-webkit-transform-origin: top right;
transform-origin: top right;
-webkit-transform: skewY(5deg);
transform: skewY(5deg);
}
.front {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: visible;
backface-visibility: visible;
position: absolute;
top: -35px;
left: 0;
width: 100%;
height: 455px;
-webkit-transform-origin: left 35px;
transform-origin: left 35px;
-webkit-transform: rotateX(16deg.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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