<div class="ball"></div>
body {
margin: 0;
padding: 0;
background: linear-gradient(skyblue, white 450px, yellowgreen 0);
min-height: 100vh;
}
@keyframes bounce {
60%, 80%, to {
transform: translateY(400px);
}
70% { transform: translateY(300px); }
90% { transform: translateY(360px); }
}
.ball {
width: 0;
height: 0;
padding: 1.5em;
border-radius: 50%;
margin: auto;
background: red radial-gradient(at 30% 30%, #fdd, red);
animation: bounce 3s infinite;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.