Intoduction :-
Hii Friends...
Today I explain how to make a bouncing circle with the help of css.
Hii Friends...
Today I explain how to make a bouncing circle with the help of css.
DEMO:-
Welcome On Dot Net Modules
Example :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Welcome on Dot Net Modules</title>
<style type="text/css">
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
width: 500px;
margin: 50px auto;
color: #444;
}
.circle {
background: rgb(36, 159, 163);
width: 130px;
height: 130px;
border-radius: 65px;
margin: 50px;
display: inline-block;
margin-left:165px;
}
.bounce {
animation: bounce 1s .5s;
transform: scale(0.85);
}
@keyframes bounce {
0% { transform: scale(1.1); opacity: 1 }
50% { transform: scale(1.6); opacity: .7; }
60% { transform: scale(0.6); opacity: 1 }
80% { transform: scale(0.95) }
100% { transform: scale(0.85) }
}
</style>
</head>
<body>
<div style="border: 5px groove rgb(36, 159, 163);">
<h1 style="color: rgb(36, 159, 163); font-style: italic; text-align: center">
Welcome On Dot Net Modules</h1>
<div class="circle bounce">
</div>
</div>
</body>
</html>
0 comments:
Post a Comment