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>Neumorphism Animation </title>
</head>
<body>
<div class="circle">
<div class="card">
<div class="box">
<div class="par">
<svg>
<circle cx="70" cy="70" r="70"></circle>
<circle cx="70" cy="70" r="70"></circle>
</svg>
<div class="num">
<h2>90 <span>%</span></h2>
</div>
</div>
<div class="text">Html</div>
</div>
</div>
<div class="card">
<div class="box">
<div class="par">
<svg>
<circle cx="70" cy="70" r="70"></circle>
<circle cx="70" cy="70" r="70"></circle>
</svg>
<div class="num">
<h2>80 <span>%</span></h2>
</div>
</div>
<div class="text">css</div>
</div>
</div>
<div class="card">
<div class="box">
<div class="par">
<svg>
<circle cx="70" cy="70" r="70"></circle>
<circle cx="70" cy="70" r="70"></circle>
</svg>
<div class="num">
<h2>72 <span>%</span></h2>
</div>
</div>
<div class="text">javascript</div>
</div>
</div>
</div>
</body>
style.css: The following is the code for file “style.css” which is used in the above HTML code.
* {
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #02072A;
}
.circle {
position: relative;
width: 900px;
display: flex;
justify-content: space-around;
}
.circle .card {
position: relative;
width: 250px;
background: linear-gradient(0deg, #1b1b1b, #222, #570885);
display: flex;
justify-content: center;
align-items: center;
height: 300px;
border-radius: 4px;
text-align: center;
overflow: hidden;
transition: 0.5s;
}
.circle .card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 35px rgba(0, 0, 0, .5);
}
.circle .card::before {
content: '';
position: absolute;
top: 0;
left: -50%;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, .03);
pointer-events: none;
z-index: 1;
}
.par {
position: relative;
width: 150px;
height: 150px;
border-radius: 50%;
box-shadow: inset 0 0 50px #000;
background: #222;
z-index: 1000;
}
.par .num {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
}
.par .num h2 {
color: #777;
font-weight: 700;
transition: 0.5s;
}
.card:hover .par .num h2 {
color: #fff;
font-size: 60px;
}
.par .num h2 span {
font-size: 24px;
color: #777;
}
.card:hover .par .num h2 span {
color: #fff;
}
.text {
position: relative;
color: #777;
margin-top: 20px;
font-weight: 700;
font-size: 18px;
letter-spacing: 1px;
text-transform: uppercase;
transition: 0.5s;
}
.card:hover .text {
color: #fff;
}
svg {
position: relative;
width: 150px;
height: 150px;
z-index: 1000;
}
svg circle {
width: 100%;
height: 100%;
fill: none;
stroke: #191919;
stroke-width: 10;
stroke-linecap: round;
transform: translate(5px, 5px);
}
svg circle:nth-child(2) {
stroke-dasharray: 440;
stroke-dashoffset: 440;
}
.card:nth-child(1) svg circle:nth-child(2) {
stroke-dashoffset: calc(440 - (440 * 90) /100);
stroke: crimson;
}
.card:nth-child(2) svg circle:nth-child(2) {
stroke-dashoffset: calc(440 - (440 * 80) /100);
stroke: chartreuse;
}
.card:nth-child(3) svg circle:nth-child(2) {
stroke-dashoffset: calc(440 - (440 * 72) /100);
stroke: #ff04f7;
}
0 Comments