Bouncing Ball using HTML & CSS.
Bouncing Ball using
HTML & CSS.
Example.html
<html>
<head><link rel="stylesheet" type="text/css" href="Style.css"></head>
<body>
<div class="center">
<div class="ball"></div>
<div class="shadow"></div>
</div>
</body>
</html>
========================================================================
Style.css
body
{
margin: 0px;
padding: 0px;
}
.center
{
top:10%;
left: 10%;
position: absolute;
transform: translate(-50%,-50%);
}
.ball
{
width: 100px;
border-top: 50px solid #000;
border-bottom: 50px solid grey;
border-radius: 50%;
animation:bounce 1s infinite linear;
}
.shadow
{
position:absolute;
top:100px;
left:30px;
width:50px;
height:10px;
background:#262726;
border-radius: 50%;
opacity:.8;
animation:shadow 1s infinite linear;
}
@keyframes bounce {
0%
{
transform: translateY(0) rotate(0deg);
}
50%
{
transform: translateY(-200px) rotate(180deg);
}
100%
{
transform: translateY(0)rotate(0deg);
}
}
@keyframes shadow
{
0%
{
transform:scale(1);
opacity:.8;
}
50%
{
transform:scale(2);
opacity:.4;
}
100%
{
transform:scale(1);
opacity:.8;
}
}
Easy Coding. . For bouncing
ReplyDeleteball.
Yes Bruh ,Enjoy :)
Delete