CSS
语言:
CSSSCSS
确定
body {
background-color: #000;
font-family: 'Roboto Condensed', sans-serif;
min-height: 100vh;
margin: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-perspective: 200vmin;
perspective: 200vmin;
overflow: hidden;
}
.controls {
background-color: #272930;
color: #fff;
position: fixed;
bottom: 30px;
left: calc(50% - 10em);
width: 20em;
z-index: 2;
text-align: center;
color: #989aa4;
border-radius: 0.2em 0.2em 0 0;
}
.controls h2:after {
content: ":";
}
.controls a {
cursor: pointer;
}
.controls h2,
.controls a {
padding: 0.6em 0.6em;
margin: 0;
display: inline-block;
font-size: 1em;
font-weight: bold;
}
html.view-top .view-top,
html.view-side .view-side {
background-color: #1e2025;
color: #fff;
}
.track {
height: 100%;
background: #6f5664;
border-radius: 50%;
box-sizing: border-box;
padding: 20%;
box-shadow: inset 0 0 0.4em #444;
}
.track__infield {
height: 100%;
width: 100%;
border-radius: 50%;
background: -webkit-linear-gradient(#429c6b 50%, #429463 50%);
background: linear-gradient(#429c6b 50%, #429463 50%);
background-size: 12vmin 12vmin;
box-shadow: 0 0 0.4em #444;
}
.base {
width: 80vmin;
height: 80vmin;
background: -webkit-linear-gradient(#429c6b 50%, #429463 50%);
background: linear-gradient(#429c6b 50%, #429463 50%);
background-size: 12vmin 12vmin;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
position: relative;
padding: 1em;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}
.base:after {
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
display: block;
background-color: #3d1803;
content: "";
position: absolute;
height: 5vmin;
width: 100%;
top: 100%;
left: 0;
-webkit-transform: rotateX(-90deg);
transform: rotateX(-90deg);
z-index: -1;
}
html.view-side .base {
-webkit-transform: rotateX(50deg) translateY(-10%);
transform: rotateX(50deg) translateY(-10%);
}
#car {
position: absolute;
top: 0;
left: 0;
-webkit-transform-origin: 50% 70%;
-ms-transform-origin: 50% 70%;
transform-origin: 50% 70%;
height: 10%;
width: 10%;
z-index: 1;
}
#car,
#car div {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.car__base {
height: 100%;
width: 55%;
background-color: #c81415;
position: relative;
margin: 0 auto;
}
.wall-container {
height: 100%;
width: 100%;
position: relative;
}
.wall {
background-color: #c81415;
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
}
.wall--1 {
background-color: #000;
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: rotateX(105deg);
transform: rotateX(105deg);
height: 1vmin;
position: relative;
}
.wall--2 {
-webkit-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: rotateY(90deg) skewY(-20deg);
transform: rotateY(90deg) skewY(-20deg);
width: 1vmin;
right: 0;
left: auto;
}
.wall--3 {
background-color: #000;
-webkit-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-webkit-transform: rotateX(-110deg);
transform: rotateX(-110deg);
height: 1vmin;
bottom: 0;
top: auto;
}
.wall--4 {
-webkit-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: rotateY(-90deg) skewY(20deg);
transform: rotateY(-90deg) skewY(20deg);
width: 1vmin;
}
.tail-light {
background-color: #f04c36;
height: 100%;
width: 20%;
float: left;
}
.tail-light + .tail-light {
float: right;
}
.head-light {
border-radius: 50%;
background-color: #fff;
height: 100%;
width: 20%;
float: left;
}
.head-light + .head-light {
float: right;
}
.car-top {
top: 0;
left: 0;
height: 100%;
width: 100%;
position: absolute;
-webkit-transform: translateZ(1vmin) translateY(0.4vmin);
transform: translateZ(1vmin) translateY(0.4vmin);
}
.hood {
bottom: 0;
left: 0;
position: absolute;
width: 100%;
height: 35%;
background-color: #c81415;
-webkit-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: rotateX(-10deg);
transform: rotateX(-10deg);
}
.front-shield {
background-color: #b4dede;
position: absolute;
bottom: 100%;
height: 60%;
width: 100%;
-webkit-transform: rotateX(-20deg);
transform: rotateX(-20deg);
-webkit-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.front-shield:after {
background-color: #b4dede;
content: "";
display: block;
position: absolute;
bottom: 0;
height: 260%;
width: 100%;
-webkit-transform: rotateX(30deg);
transform: rotateX(30deg);
-webkit-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.roof {
background-color: #c81415;
position: absolute;
bottom: 100%;
height: 118.8%;
width: 100%;
-webkit-transform: rotateX(30deg);
transform: rotateX(30deg);
-webkit-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.rear-shield {
background-color: #b4dede;
position: absolute;
bottom: 100%;
height: 80%;
width: 100%;
-webkit-transform: rotateX(40deg);
transform: rotateX(40deg);
-webkit-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.trunk {
background-color: #c81415;
position: absolute;
bottom: 100%;
height: 80%;
width: 100%;
-webkit-transform: rotateX(-20deg);
transform: rotateX(-20deg);
-webkit-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.wheel {
border-radius: 50%;
height: 15%;
width: 100%;
background-color: #000;
-webkit-transform: skewY(-20deg) translateX(-30%);
-ms-transform: skewY(-20deg) translateX(-30%);
transform: skewY(-20deg) translateX(-30%);
}
.wall--2 .wheel {
-webkit-transform: skewY(20deg) translateX(30%);
-ms-transform: skewY(20deg) translateX(30%);
transform: skewY(20deg) translateX(30%);
}
.wheel--1 {
margin: 100% 0 345%;
}