BO
html{
box-sizing: border-box;
--black :#1a1c20 ;
--white : #fff ;
--green : #00c380 ;
--d-green : #019b66 ;
--gray : #c1c1c1 ;
--l-gray: #c4c4c4 ;
--m-gray : #373838 ;
--d-gray : #282724 ;
--d-blue: #202428 ;
--orange : #ef6206 ;
--yellow : #dfa500 ;
--l-yellow: #deb953;
--light: #fbfbfb ;
--n-road : -4em;
--p-road : 7em;
background-color: var(--green) ;
}
html *,
html *::before,
html *::after{
box-sizing: inherit ;
}
body::before,
body::after {
content: " " ;
position: absolute ;
}
body{
margin: 0 ;
height: 100vh ;
display: flex ;
overflow: hidden ;
position: relative ;
align-items: center ;
justify-content: center ;
background-repeat: no-repeat ;
animation: car 3.5s cubic-bezier(0.57, 0.63, 0.49, 0.65) infinite ;
background-image :
/* ===rubber-l */
radial-gradient(circle at 49% 117%, var(--black) 37%, transparent 38%) ,
radial-gradient(circle at -24% 50%, var(--white) 31%, transparent 49%) ,
radial-gradient(2.95em 2.5em at 52% 1.2%, var(--black) 37%, transparent 38%) ,
radial-gradient(2.95em 2.5em at 52% 1.2%, var(--black) 37%, transparent 38%) ,
linear-gradient(var(--black) 100%, transparent 0) ,
/* rubber-l=== */
/* ===rubber-r */
radial-gradient(circle at 49% 117%, var(--black) 37%, transparent 38%) ,
radial-gradient(circle at 124% 50%, var(--white) 31%, transparent 49%) ,
radial-gradient(2.95em 2.5em at 48% 1.2%, var(--black) 37%, transparent 38%) ,
radial-gradient(2.95em 2.5em at 48% 1.2%, var(--black) 37%, transparent 38%) ,
linear-gradient(var(--black) 100%, transparent 0) ,
/* rubber-r=== */
/* ===shadow */
linear-gradient( var(--d-green) 100% , transparent 0) ;
/* shadow=== */
background-size :
/* ===rubber-l */
2.5em 2.5em ,
0.7em 0.6em ,
2.5em .9em ,
2.5em .9em ,
1.95em 3.9em ,
/* rubber-l=== */
/* ===rubber-r */
2.5em 2.5em ,
0.7em 0.6em ,
2.5em .9em ,
2.5em .9em ,
1.95em 3.9em ,
/* rubber-r=== */
/* ===shadow */
13em .9em ;
/* shadow=== */
background-position :
/* ===rubber-l */
calc(50% - 6.4em) calc(50% - 1.7em) ,
calc(50% - 5.26em) calc(50% - -3.4em) ,
calc(50% - 6.5em) calc(50% - -3.8em) ,
calc(50% - 4.3em) calc(50% - -3.2em) ,
calc(50% - 6.58em) calc(50% - -1.5em) ,
/* rubber-l=== */
/* ===rubber-r */
calc(50% - -6.45em) calc(50% - 1.7em) ,
calc(50% - -5.26em) calc(50% - -3.4em) ,
calc(50% - -6.5em) calc(50% - -3.8em) ,
calc(50% - -4.3em) calc(50% - -3.2em) ,
calc(50% - -6.58em) calc(50% - -1.5em) ,
/* rubber-r=== */
/* ===shadow */
center calc(50% - -3.8em) ;
/* shadow=== */
}
body::before{
width: 15.5em ;
height: 62.9em ;
top: calc(50% - 26.2em) ;
background-size: 24.6% 491% ;
background-repeat: no-repeat ;
background-position: center 0 ;
animation: line 1.5s infinite linear, move-road 3.5s infinite linear ;
transform: perspective(311px) rotateX(83deg) translate3d(var(--n-road) ,-11.975em, 0) ;
background-image: repeating-linear-gradient(to top, var(--white) , var(--white) 4.6%, transparent 0 , transparent 13.01%) ;
}
body::after{
width: 15.2em ;
height: 13.2em ;
top: calc(50% - 8.8em) ;
left: calc(50% - 7.55em) ;
background-repeat: no-repeat ;
animation: light 1s linear infinite, shake 3.5s linear infinite ;
background-image :
/* ===ceiling */
radial-gradient(58em 20em at 50% 215% , transparent 20% , var(--white) 20.5% , var(--white) 20.8% , var(--green) 21.5%) ,
/* ceiling=== */
/* ===antenna */
radial-gradient( circle at center 100% , var(--black) 30% , transparent 0) ,
/* antenna=== */
/* ===antenna */
linear-gradient(var(--white) 100% , transparent 0) ,
/* antenna=== */
/* ===glass-l */
radial-gradient( 17.8em 37em at 70% 240% , var(--black) 30% , transparent 30.5%) ,
/* glass-l=== */
/* ===glass-r */
radial-gradient( 17.8em 37em at 31% 240% , var(--black) 30% , transparent 30.5%) ,
/* glass-r=== */
/* ===light */
radial-gradient( circle , var(--light) 48% , var(--black) 52%, var(--black) 59% , transparent 62%) ,
/* light=== */
/* ===light */
radial-gradient( circle , var(--light) 48% , var(--black) 52%, var(--black) 59% , transparent 62%) ,
/* light=== */
/* ===hood-ro */
radial-gradient( 1em 1em at 102% 100% , var(--m-gray) 28%, #f3f3f3 30% ) ,
/* hood-ro=== */
/* ===hood-ro */
radial-gradient( 1em 1em at 97% -7% , var(--m-gray) 28%, var(--l-gray) 30% ) ,
/* hood-ro=== */
/* ===hood-ro */
radial-gradient( 1em 1em at -6% 102% , var(--m-gray) 28%, #efefef 30% ) ,
/* hood-ro=== */
/* ===hood-ro */
radial-gradient( 1em 1em at -6% -1% , var(--m-gray) 28%, var(--l-gray) 30% ) ,
/* hood-ro=== */
/* ===hood-f */
linear-gradient( to top , var(--m-gray) 50% , var(--d-gray) 0, var(--d-gray) 58% , var(--m-gray) 0) ,
/* hood-f=== */
/* ===hood-e */
linear-gradient( to top , var(--l-gray) 30% , var(--white) 100% , transparent 0) ,
/* hood-e=== */
/* ===hood-l */
radial-gradient( 16.4em 30.1em at 209% 333% , var(--white) 30% , transparent 30.2%) ,
/* hood-l=== */
/* ===hood-r */
radial-gradient( 16.4em 30.1em at -109% 333% , var(--white) 30% , transparent 30.2%) ,
/* hood-r=== */
/* ===hood-o */
linear-gradient( var(--gray) 100% , transparent 0) ,
/* hood-o=== */
/* ===hood */
linear-gradient( var(--white) 100% , transparent 0) ,
/* hood=== */
/* ===mirror */
radial-gradient( 6.7em 2.5em at 154% 8% , var(--black) 30% , transparent 33%) ,
/* mirror=== */
/* ===mirror */
radial-gradient( 6.7em 2.5em at -53% 8% , var(--black) 30% , transparent 33%) ,
/* mirror=== */
/* ===guide-l */
linear-gradient( var(--orange) 100% , transparent 0) ,
/* guide-l=== */
/* ===guide-r */
linear-gradient( var(--orange) 100% , transparent 0) ,
/* guide-r=== */
/* ===plaque */
linear-gradient( var(--yellow) 100% , transparent 0) ,
/* plaque=== */
/* ===plaque */
linear-gradient( var(--l-yellow) 100% , transparent 0) ,
/* plaque=== */
/* ===bumper */
linear-gradient( var(--d-blue) 100% , transparent 0) ,
/* bumper=== */
/* ===bumper-l */
radial-gradient( circle at 124% 39% , var(--d-blue) 60% , transparent 64%) ,
/* bumper-l=== */
/* ===bumper-r */
radial-gradient( circle at -44% 39% , var(--d-blue) 60% , transparent 64%) ,
/* bumper-r=== */
/* ===bumper-d */
radial-gradient(13.2em 2em at 50% 59% , var(--l-gray) 96% , transparent 100% ) ,
/* bumper-d=== */
/* ===bumper-l */
radial-gradient( 1.6em 1.6em at 75% -9% , var(--l-gray) 60% , transparent 64%) ,
/* bumper-l=== */
/* ===bumper-r */
radial-gradient( 1.6em 1.6em at 15% -9% , var(--l-gray) 60% , transparent 64%) ,
/* bumper-r=== */
/* ===floor */
linear-gradient( var(--d-blue) 100% , transparent 0) ,
/* floor=== */
/* ===floor-l */
radial-gradient( 6.9em 4.6em at 295% 3% , var(--d-blue) 30% , transparent 31%) ,
/* floor-l=== */
/* ===floor-r */
radial-gradient( 6.9em 4.6em at -189% 3% , var(--d-blue) 30% , transparent 31%) ;
/* floor-r=== */
background-size :
/*=== ceiling */
61.5% 20% ,
/* ceiling=== */
/* ===antenna */
5% 6% ,
/* antenna=== */
/*=== antenna */
.4% 39% ,
/* antenna=== */
/* ===glass-l */
60% 30% ,
/* glass-l=== */
/* ===glass-r */
60% 30% ,
/* glass-r=== */
/* ===light */
16% 16% ,
/* light=== */
/* ===light */
16% 16% ,
/* light=== */
/* ===hood-ro */
2.4% 2% ,
/* hood-ro=== */
/* ===hood-ro */
2.4% 2.3% ,
/* hood-ro=== */
/* ===hood-ro */
2.4% 2.3% ,
/* hood-ro=== */
/* ===hood-ro */
2.4% 2.3% ,
/* hood-ro=== */
/* ===hood-f */
91% 12% ,
/* hood-f=== */
/* ===hood-e */
93.9% 17% ,
/* hood-e=== */
/* ===hood-l */
12% 17.5% ,
/* hood-l=== */
/* ===hood-r */
12% 17.5% ,
/* hood-r=== */
/* ===hood-o */
38% 1.1% ,
/* hood-o=== */
/* ===hood */
77% 25% ,
/* hood=== */
/* ===mirror */
9% 30% ,
/* mirror=== */
/* ===mirror */
9% 30% ,
/* mirror=== */
/* ===guide-l */
8.4% 3% ,
/* guide-l=== */
/* ===guide-r */
8.4% 3% ,
/* guide-r=== */
/* ===plaque */
33% 6.5% ,
/* plaque=== */
/* ===plaque */
36% 9% ,
/* plaque=== */
/* ===bumper */
87% 30% ,
/* bumper=== */
/* ===bumper-l */
10% 12% ,
/* bumper-l=== */
/* ===bumper-r */
10% 12% ,
/* bumper-r=== */
/* ===bumper-d */
78% 35% ,
/* bumper-d=== */
/* ===bumper-l */
11% 8% ,
/* bumper-l=== */
/* ===bumper-r */
11% 8% ,
/* bumper-r=== */
/* ===floor */
68% 8% ,
/* floor=== */
/* ===floor-l */
5% 7% ,
/* floor-l=== */
/* ===floor-r */
5% 7% ;
/* floor-r=== */
background-position :
/*=== ceiling */
50.5% 0 ,
/* ceiling=== */
/* ===antenna */
90% 37% ,
/* antenna=== */
/*=== antenna */
88% 1.2% ,
/* antenna=== */
/* ===glass-l */
0 11.7% ,
/* glass-l=== */
/* ===glass-r */
100% 11.7% ,
/* glass-r=== */
/* ===light */
5% 63% ,
/* light=== */
/* ===light */
95% 63% ,
/* light=== */
/* ===hood-ro */
4.1% 55.7% ,
/* hood-ro=== */
/* ===hood-ro */
4.1% 65.9% ,
/* hood-ro=== */
/* ===hood-ro */
95.8% 55.7% ,
/* hood-ro=== */
/* ===hood-ro */
95.8% 65.8% ,
/* hood-ro=== */
/* ===hood-f */
center 62% ,
/* hood-f=== */
/* ===hood-e */
49% 63.6% ,
/* hood-e=== */
/* ===hood-l */
3.4% 46.2% ,
/* hood-l=== */
/* ===hood-r */
96.5% 46.2% ,
/* hood-r=== */
/* ===hood-o */
center 40.9% ,
/* hood-o=== */
/* ===hood */
center 50.3% ,
/* hood=== */
/* ===mirror */
5.7% 48.6% ,
/* mirror=== */
/* ===mirror */
95% 48.6% ,
/* mirror=== */
/* ===guide-l */
5% 75.2% ,
/* guide-l=== */
/* ===guide-r */
95% 75.2% ,
/* guide-r=== */
/* ===plaque */
51% 86% ,
/* plaque=== */
/* ===plaque */
51.5% 87.3% ,
/* plaque=== */
/* ===bumper */
center 71.9% ,
/* bumper=== */
/* ===bumper-l */
-0.8% 77.8% ,
/* bumper-l=== */
/* ===bumper-r */
101.7% 77.8% ,
/* bumper-r=== */
/* ===bumper-d */
center 80.2% ,
/* bumper-d=== */
/* ===bumper-l */
4% 85.9% ,
/* bumper-l=== */
/* ===bumper-r */
97% 85.9% ,
/* bumper-r=== */
/* ===floor */
center 92.5% ,
/* floor=== */
/* ===floor-l */
11.7% 92.6% ,
/* floor-l=== */
/* ===floor-r */
88.3% 92.6% ;
/* floor-r=== */
}
@keyframes line{
100%{
background-position: center 100% ;
}
}
@keyframes car{
15%, 23%{
transform: translate3d(-2.3em, 0, 0) ;
}
36% , 42%{
transform: translate3d(-.8em, 0, 0) ;
}
61%, 71.5%{
transform: translate3d(2.8em, 0, 0) ;
}
81%, 88%{
transform: translate3d(1.5em, 0, 0) ;
}
}
@keyframes move-road {
5.5%{
transform: perspective(311px) rotateX(83deg) translate3d(var(--n-road) ,-11.975em, 0) ;
}
27%, 51%{
transform: perspective(311px) rotateX(83deg) translate3d(var(--p-road) ,-11.975em, 0) ;
}
73%, 100% {
transform: perspective(311px) rotateX(83deg) translate3d(var(--n-road) ,-11.975em, 0) ;
}
}
@keyframes light{
0% , 37%{
--light: #fbfbfb ;
}
50%{
--light : #f1f1f1 ;
}
62%{
--light : #fbfbfb ;
}
65%{
--light: #f1f1f1 ;
}
95%{
--light: #fbfbfb ;
}
100%{
--light: #f1f1f1 ;
}
}
@keyframes shake {
5%, 26%{
transform: rotate(-1.5deg) ;
}
33%, 41%{
transform: rotate(-.5deg) ;
}
48%, 69%{
transform: rotate(1.5deg) ;
}
80%, 95%{
transform: rotate(.5deg) ;
}
}
@media screen and (max-width: 36em) {
html{
transform: scale(.5) ;
}
body::before{
width: 11em ;
--n-road: -4em ;
--p-road: 4em ;
}
}
