版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_37506861/article/details/75912978
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>running_Car</title>
<link rel="stylesheet" href="CSS/animate.css">
<style>
@keyframes car_Move{
0%{
-webkit-transform: translateX(0px) rotateY(0deg) ;
-ms-transform: translateX(0px) rotateY(0deg) ;
-o-transform: translateX(0px) rotateY(0deg) ;
transform: translateX(0px) rotateY(0deg) ;
}
50%{
-webkit-transform: translateX(800px) rotateY(0deg);
-ms-transform: translateX(800px) rotateY(0deg);
-o-transform: translateX(800px) rotateY(0deg);
transform: translateX(800px) rotateY(0deg);
}
70%{
-webkit-transform: translateX(800px) rotateY(180deg) ;
-ms-transform: translateX(800px) rotateY(180deg);
-o-transform: translateX(800px) rotateY(180deg);
transform: translateX(800px) rotateY(180deg);
}
80%{
-webkit-transform: translateX(600px) rotateY(180deg) ;
-ms-transform: translateX(600px) rotateY(180deg);
-o-transform: translateX(600px) rotateY(180deg);
transform: translateX(600px) rotateY(180deg);
}
80%{
-webkit-transform: translateX(620px) rotateY(180deg) rotateZ(-45deg);
-ms-transform: translateX(620px) rotateY(180deg) rotateZ(-45deg);
-o-transform: translateX(620px) rotateY(180deg) rotateZ(-45deg);
transform: translateX(620px) rotateY(180deg) rotateZ(-45deg);
}
90%{
-webkit-transform: translate(450px,-250px) rotateY(180deg) rotateZ(-45deg) ;
-ms-transform: translate(450px,-250px) rotateY(180deg) rotateZ(-45deg);
-o-transform: translate(450px,-250px) rotateY(180deg) rotateZ(-45deg);
transform: translate(450px,-250px) rotateY(180deg) rotateZ(-45deg);
}
100%{
-webkit-transform: translate(0px,0px) rotateY(0deg) rotateZ(0deg) ;
-ms-transform: translate(0px,0px) rotateY(0deg) rotateZ(0deg);
-o-transform: translate(0px,0px) rotateY(0deg) rotateZ(0deg);
transform: translate(0px,0px) rotateY(0deg) rotateZ(0deg);
}
}
@keyframes car_Roll{
0%{
-webkit-transform: rotateZ(0deg);
-ms-transform: rotateZ(0deg);
-o-transform: rotateZ(0deg);
transform: rotateZ(0deg);
}
100%{
-webkit-transform: rotateZ(1800deg) ;
-ms-transform: rotateZ(1800deg) ;
-o-transform: rotateZ(1800deg) ;
transform: rotateZ(1800deg) ;
}
}
.wrap{
width: 1000px;
background-color: rgb(206,227,232);
height: 600px;
margin:0 auto;
overflow: hidden;
position: relative;
}
.hill1{
height: 450px;
width: 450px;
background-color: rgb(210,163,146);
-webkit-transform: rotateZ(45deg);
-ms-transform: rotateZ(45deg);
-o-transform: rotateZ(45deg);
transform: rotateZ(45deg);
position: absolute;
top: 300px;
left: 20px;
border-radius: 50px;
}
.hill2{
height: 450px;
width: 450px;
background-color: rgb(219,221,219);
-webkit-transform: rotateZ(45deg);
-ms-transform: rotateZ(45deg);
-o-transform: rotateZ(45deg);
transform: rotateZ(45deg);
position: absolute;
top: 200px;
left: 500px;
border-radius: 50px;
}
.sun{
height: 400px;
width: 400px;
background-color: rgb(255,154,71);
border-radius: 50%;
position: absolute;
top:-200px;
right: -200px;
box-shadow: 0px 0px 10px 10px rgba(255,154,71,0.4);
}
.glass1{
width: 1200px;
height: 500px;
background-color: rgb(165,255,99);
position: absolute;
top: 400px;
border-radius: 150px 600px 150px 150px / 0px 300px 150px 150px;
}
.glass2{
width: 1200px;
height: 500px;
background-color: rgb(140,204,72);
position: absolute;
top: 420px;
left: 300px;
border-radius: 150px 700px 150px 150px / 0px 300px 50px 150px;
-webkit-transform: rotateZ(-8deg);
-ms-transform: rotateZ(-8deg);
-o-transform: rotateZ(-8deg);
transform: rotateZ(-8deg);
box-shadow: 0px 0px 5px 8px rgba(140,204,72,0.4)
}
/*有问题*/
.road2{
height: 8px;
width: 100%;
position: absolute;
left: 0px;
bottom: 60px;
background-color: rgb(187,158,146);
}
.road3{
height: 12px;
width: 100%;
position: absolute;
left: 0px;
bottom: 68px;
background-color: rgb(220,201,193);
}
.road4{
height: 12px;
width: 100%;
position: absolute;
bottom: 80px;
left: 0;
background-size: 12px 12px;
background-image:linear-gradient(135deg,transparent 28%,Darkgreen 28% );
background-repeat: repeat;
}
.car img:nth-child(1){
height: 40px;
width: 120px;
}
.car img:nth-child(2){
height: 28px;
position: absolute;
bottom: -10px;
left: 8px;
-webkit-animation: car_Roll 5s linear infinite;
-o-animation: car_Roll 5s linear infinite;
animation: car_Roll 5s linear infinite;
}
.car img:nth-child(3){
height: 28px;
position: absolute;
bottom: -10px;
left: 85px;
-webkit-animation: car_Roll 5s linear infinite;
-o-animation: car_Roll 5s linear infinite;
animation: car_Roll 5s linear infinite;
}
.move{
position: absolute;
bottom: 20px;
left: 0px;
-webkit-animation: car_Move 5s linear infinite;
-o-animation: car_Move 5s linear infinite;
animation: car_Move 5s linear infinite;
-webkit-transform-origin: 0px 0px;
-moz-transform-origin: 0px 0px;
-ms-transform-origin: 0px 0px;
-o-transform-origin: 0px 0px;
transform-origin: 0px 0px;
}
.road1{
height: 60px;
width: 100%;
background-color: rgb(121,121,121);
position: absolute;
bottom:0px;
left: 0px;
overflow: hidden;
}
.line{
height: 10px;
width: 120px;
margin-top: 30px;
background-color: rgb(219,221,219);
float: left;
}
.road1 div:nth-child(2){
margin-left: 100px;
}
.road1 div:nth-child(3){
margin-left: 100px;
}
.road1 div:nth-child(4){
margin-left: 100px;
}
.road1 div:nth-child(5){
margin-left: 100px;
}
.road5{
position: absolute;
bottom: 50px;
right: 415px;
width:80px;
height:100px;
background-color:rgb(121,121,121);
-webkit-transform: rotateX(30deg);
-ms-transform: rotateX(30deg);
-o-transform: rotateX(30deg);
transform: rotateX(30deg);
-webkit-transform: skewX(45deg);
-ms-transform: skewX(45deg);
-o-transform: skewX(45deg);
transform: skewX(45deg);
}
</style>
</head>
<body>
<div class="wrap">
<div class="hill2"></div>
<div class="glass1"></div>
<div class="glass2"></div>
<div class="hill1"></div>
<div class="sun"></div>
<div class="road1">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<div class="road2"></div>
<div class="road3"></div>
<div class="road4"></div>
<div class="road5"></div>
<div class="move">
<div class="car">
<img src="./images/che.jpg" alt="">
<img src="./images/lun.jpg" alt="">
<img src="./images/lun.jpg" alt="">
</div>
</div>
</div>
</body>
</html>