 |
| Bouncing Ball Animation gif |
Learn how to create Bouncing Ball Animation using only HTML and CSS.
The VS Code extensions used in this video are Live Server and Prettier.
Watch the Bouncing Ball animation tutorial video here-
HTML Source Code-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>bouncing ball effect</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="box">
<div class="ball"></div>
</div>
</body>
</html>
Download HTML source file
CSS Source Code-
*{
padding:0px;
margin: 0px;
background-color: rgb(65, 65, 65);
}
.box{
position: absolute;
width: 400px;
height: 500px;
background-color: rgb(110, 218, 110);
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.ball{
position: relative;
width: 70px;
height: 70px;
border-radius: 50%;
background: linear-gradient(to right, rgb(235, 110, 172),rgb(235, 35, 62));
margin: auto;
animation: bounce 1.3s infinite;
}
@keyframes bounce{
0%{
width: 70px;
height: 70px;
}
30%{
width: 60px;
height: 70px;
}
50%{
width: 77px;
height: 50px;
transform: translateY(452px);
box-shadow: 20px 10px 10px black;
}
75%{
width: 77px;
height: 70px;
}
100%{
transform: translateY(0px);
}
}
Download CSS source file
0 Comments