Home > Developer > Web Develop
<!doctype html>
<meta charset= "UTF-8" >
<meta name= "Generator" content= "EditPlus?" >
<meta name= "Author" content= "" >
<meta name= "Keywords" content= "" >
<meta name= "Description" content= "" >
<title>Document</title>
<style>
HTML {
Box-sizing:border-box;
}
*,
*:before,
*:after {
Box-sizing:inherit;
}
Body {
Overflow:hidden;
HEIGHT:100VH;
Background:linear-gradient 180deg, #09283d, #1b415c, #29516c, #6e8ea5, #7cadd0, #7cadd0, #7cadd0, #7cadd0, #6e8ea5, #3a6 583, #1a4461, #09283d);
background-size:2400% 2,400%;
Animation:daynight 60s ease infinite;
}
@keyframes Daynight {
0%{background-position:25% 0%}
50%{background-position:76% 100%}
100%{background-position:25% 0%}
}
@keyframes Driving {
0% {
Left:-25%;
}
10% {
bottom:0%;
}
20% {
Transform:scale (0.5) Rotatez ( -5DEG);
bottom:5%
}
25% {
Transform:scale (0.5) Rotatez (0DEG);
}
40% {
Transform:scale (0.5) Rotatez (5DEG);
}
50% {
Transform:scale (0.5) Rotatez (0DEG);
}
100% {
left:110%;
bottom:10%;
Transform:scale (0.5) Rotatez (0DEG);
}
}
@keyframes road-moving {
100% {
Transform:translate ( -2400px);
}
}
@keyframes Wheelsrotation {
100% {
Transform:rotate (360DEG);
}
}
@keyframes Moon {
50% {
Transform:translatey ( -20px);
}
100% {
Transform:translate (80px, -140px);
}
}
@keyframes Sun-moon {
From {transform:rotate (0deg);}
to {transform:rotate (360deg);}
}
/* CAR CONTAINER */
. car-container {
Position:absolute;
Bottom:-10%;
width:430px;
height:300px;
Animation:driving 5s infinite linear;
Transform:scale (0.5);
}
. car-container:after {
Content: "";
width:426px;
height:1px;
margin-top:88px;
Display:block;
Position:absolute;
Left:-3%;
Z-index:-1;
bottom:0;
box-shadow:2px-15px 25px 2px #000000;
}
/* WHEELS */
. Wheel1,
. wheel2 {
width:120px;
height:120px;
Background-color:grey;
border-radius:50%;
border:20px solid black;
Position:absolute;
bottom:0;
animation:wheelsrotation 1s infinite linear;
}
. wheel1 {
left:5%;
}
. Wheel1-top,
. wheel2-top {
bottom:48px;
Position:absolute;
width:106px;
height:80px;
border-radius:50%;
Z-index:5;
box-shadow:0px 13px 3px 0px Rgba (240, 240, 240, 0.53);
Transform:rotatex (180DEG);
}
. wheel1-top {
left:7%;
}
. wheel2-top {
right:7%;
}
. wheel2 {
right:5%;
}
. WHEEL-DOT1,
. wheel-dot2 {
width:10px;
height:25px;
Background-color:black;
Position:absolute;
}
. WHEEL-DOT3,
. wheel-dot4 {
width:25px;
height:10px;
Background-color:black;
Position:absolute;
}
. wheel-dot1 {
top:10%;
left:45%;
}
. wheel-dot2 {
bottom:10%;
left:45%;
}
. wheel-dot3 {
top:45%;
right:10%;
}
. wheel-dot4 {
top:45%;
left:10%;
}
. Door {
width:110px;
height:100px;
BORDER:3PX solid #B57A84;
Position:absolute;
left:36%;
top:16px;
border-radius:10% 40% 10% 10%;
}
. door-knob {
width:30px;
height:14px;
Background-color: #E8E6E6;
border-radius:30%;
Position:absolute;
left:20%;
top:5%;
border:1px solid lightcoral;
}
. car-top1 {
border-radius:25% 40% 0 0;
Background-color: #6A1621;
max-width:100%;
width:250px;
height:130px;
Position:absolute;
top:0;
left:4%;
}
. Window1,
. window2 {
Background-color: #E2F0F6;
border-radius:5px;
Position:absolute;
width:40%;
height:60%;
margin:17px;
BORDER:9PX solid #BF6D7B;
}
. Window1 {
left:0;
border-top-left-radius:30%;
}
. window2 {
right:0;
border-top-right-radius:50%;
}
. car-top2 {
border-radius:100px 200px 0 0;
Background-color: #25659C;
*/border:10px solid #72252F;
Background-color: #9C2535;
max-width:100%;
width:430px;
height:140px;
Position:absolute;
bottom:20%;
}
. Road {
width:250%;
height:200px;
Background-color: #585858;
border-top:10px solid #756D6D;
border-bottom:20px solid #756D6D;
Position:absolute;
bottom:0%;
Margin-left: -10px;
padding:0;
}
. road::before {
Content: "";
Position:absolute;
z-index:0;
Top: -17px;
left:0px;
right:0px;
border:5px solid black;
}
. road-top-half {
height:15px;
width:250%;
Position:absolute;
Left:-10%;
top:30px;
border-top:40px dashed white;
margin-top:25px;
Animation:road-moving 10s infinite linear;
Transition:all 3s linear;
}
. Skyline {
width:100%;
Position:absolute;
bottom:205px;
padding:0;
left:110%;
Animation:road-moving 10s infinite linear;
Transition:all 8s Linear;
}
. building1 {
width:220px;
height:450px;
Background-color: #211919;
position:relative;
}
. Building1-shadow {
border-top:15px solid Transparent;
border-right:60px Solid RGB (44, 37, 37);
border-bottom:15px solid #000;
border-left:15px solid Transparent;
height:450px;
width:200px;
Position:absolute;
Left: -199px;
}
. Building-left-half,
. building-right-half {
height:300px;
width:50px;
Position:absolute;
top:10px;
Border-left:16px dashed #A9D2C7;
Border-right:16px dashed Rgba (255, 255, 0, 0.19);
margin-top:25px;
}
. building-left-half {
left:10px;
padding:25px;
}
. building-right-half {
right:10px;
padding:20px;
}
. Moon {
height:100px;
width:100px;
border-radius:50%;
Background:rgb (207, 207, 212);
Margin:auto;
box-shadow:0 0 60px Gold, 0 0 100px RGB (185), inset 0 5px 12px 26px #F5F5F5, inset-2px 8px 15px 36px #E6E6DB;
Transition:1s;
Transition:1s;
right:370px;
top:30px;
Position:absolute;
Animation:sun-moon 40s 2s linear infinite;
transform-origin:50% 500px;
}
/*headlights*/
. car-top1:after {
width:13px;
height:37px;
Background-color: #BACCDA;
Position:absolute;
Bottom: -63px;
Right: -168px;
Z-index:10;
Content: "";
border-radius:10px;
BORDER:2PX solid black;
Border-left-style:none;
Transform:rotate ( -15DEG);
}
. car-top2:after {
Position:absolute;
bottom:7px;
Right: -340px;
Content: "";
width:0;
height:0;
border-top:20px solid Transparent;
border-bottom:80px solid Transparent;
border-right:500px solid Rgba (191,188,87,0.7);
Z-index:-1;
-webkit-mask-box-image:-webkit-linear-gradient (left, black, transparent);
-webkit-mask-box-image:-o-linear-gradient (left, black, transparent);
-webkit-mask-box-image:linear-gradient (to right, black, transparent);
Transform:rotate ( -9DEG);
}
</style>
<body>
<div class= "Moon" ></div>
<div class= "Skyline" >
<div class= "Building1-shadow" ></div>
<div class= "Building1" >
<div class= "Building-left-half" ></div>
<div class= "Building-right-half" ></div>
</div>
</div>
<div class= "Road" >
<div class= "Road-top-half" ></div>
<div class= "Road-bottom-half" ></div>
</div>
<div class= "Car-container" >
<div class= "CAR-TOP1" >
<div class= "Window1" ></div>
<div class= "Window2" ></div>
</div>
<div class= "CAR-TOP2" >
<div class= "Door" >
<div class= "Door-knob" ></div>
</div>
</div>
<div class= "Car-bottom" >
<div class= "Wheel1-top" ></div>
<div class= "Wheel1" >
<div class= "Wheel-dot1" ></div>
<div class= "Wheel-dot2" ></div>
<div class= "Wheel-dot3" ></div>
<div class= "Wheel-dot4" ></div>
</div>
<div class= "Wheel2-top" ></div>
<div class= "Wheel2" >
<div class= "Wheel-dot1" ></div>
<div class= "Wheel-dot2" ></div>
<div class= "Wheel-dot3" ></div>
<div class= "Wheel-dot4" ></div>
</div>
</div>
</div>
</body>
Pure CSS Car Animation design
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
