Project Introduction: In this project, we are going to implement a car running on a track using HTML and CSS with sound effects
File structure:
- . index.html
- . style.css
- .css/all.css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="css/all.css">
<title>Cat Animation </title>
</head>
<body>
<div class="animtion">
<div class="cat-part">
<div class="face-part">
<div class="cat--ear-l">
<div class="ear-inear-l"></div>
</div>
<div class="cat-ear-r">
<div class="cat-inear-r"></div>
</div>
<div class="cat-eye-l">
<div class="cat-eyeball"></div>
</div>
<div class="cat-eye-r">
<div class="cat-eyeball"></div>
</div>
<div class="cat-nose">
<div class="cat-l"></div>
<div class="cat-r"></div>
</div>
</div>
<div class="cat-body">
<div class="cat-paw-l"></div>
<div class="cat-paw-r"></div>
<div class="cat-les"></div>
</div>
<div class="sadow"></div>
</div>
</div>
</body>
style.css: The following is the code for file “style.css” which is used in the above HTML code.
body {
padding: 0;
margin: 0;
background: #010833;
}
.animtion {
height: 500px;
width: 350px;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
}
.cat-part {
position: relative;
top: 150px;
left: 50px;
}
.face-part {
background: #f1eeef;
height: 90px;
width: 150px;
border-radius: 30px;
}
.cat--ear-l,
.cat-ear-r {
width: 0;
height: 0;
border-bottom: 50px solid #33293b;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
position: relative;
z-index: -1;
}
.cat--ear-l {
bottom: 35px;
transform: rotate(-30deg);
}
.cat-ear-r {
bottom: 85px;
left: 110px;
transform: rotate(20deg);
}
.ear-inear-l {
width: 0;
height: 0;
border-bottom: 50px solid #9ca19c;
border-left: 25px solid transparent;
right: 25px;
position: relative;
}
.cat-inear-r {
position: relative;
width: 0;
height: 0;
border-bottom: 50px solid #9ca19c;
border-right: 25px solid transparent;
}
.cat-eye-l,
.cat-eye-r {
background: #d2873b;
height: 30px;
width: 30px;
border-radius: 50%;
position: relative;
}
.cat-eye-l {
bottom: 75px;
left: 30px;
}
.cat-eye-r {
bottom: 105px;
left: 90px;
}
.cat-eyeball {
background: #262626;
height: 24px;
width: 24px;
border-radius: 50%;
position: relative;
top: 3px;
left: 3px;
}
.cat-nose {
border-top: 8px solid #d36149;
height: 0;
width: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
position: relative;
bottom: 110px;
left: 70px;
}
.cat-l,
.cat-r {
background: #d36149;
height: 8px;
width: 1px;
position: relative;
}
.cat-l {
transform: rotate(45deg);
right: 4px;
bottom: 1.5px;
}
.cat-r {
transform: rotate(-45deg);
bottom: 10px;
left: 3.5px;
}
.cat-body {
background: #f7f8f4;
height: 120px;
width: 130px;
position: relative;
left: 30px;
bottom: 5px;
border-radius: 0 65px 0 0;
}
.cat-paw-l,
.cat-paw-r {
background: #f5f0f1;
height: 10px;
width: 22px;
position: relative;
border-radius: 0 0px 10px 10px;
}
.cat-paw-l {
top: 120px;
}
.cat-paw-r {
top: 110px;
left: 50px;
}
.cat-les {
background: #ece7e8;
width: 100px;
height: 20px;
position: relative;
top: 80px;
left: 100px;
border-radius: 0 20px 20px 0;
}
.sadow {
background: rgba(250, 249, 249, 0.5);
height: 30px;
width: 150px;
border-radius: 50%;
position: relative;
bottom: 15px;
left: 20px;
z-index: -1;
}
Output :
0 Comments