CSSで車を走らせる
環境
- html
- css
- html5
- css3
- 車
- 走らせる
- car
- script
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<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>
</html>
css
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, #3a6583, #1a4461, #09283d);
background-size: 2400% 2400%;
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);
}
}
/* 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%;
}
/*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);
}
行
デモ
ソース
りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています！