еще мячики

by Ksenia Polyakova

HTML

<div class="container">
  
  <div class="box">
    <div class="ball"></div>
  </div>
  <div class="box l">
    <div class="ball"></div>
  </div>
</div>

CSS

.container {
  display: flex;
}
@keyframes ball {

 to {
   transform: translateY(150px) scale(1.1, 0.9); 
 }
}

@keyframes shadow {
 to {
   transform: scale(1.5, 0.7) translateY(25px); 
 }
}

.box{
  width: 50px;
  height: 200px;
  position: relative;
}
.box::before {
  content: '';
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
  position: absolute;
  bottom: 0;
  transform: scale(1, 0.5) translateY(25px);
  animation-name: shadow;
  animation-duration: 1s;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.ball {
  animation-name: ball;
  animation-duration: 1s;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: white;
  box-shadow: inset 0 -10px 20px 15px rgb(255, 0, 0);
}

.l {
  transform: scale(1.5);
  margin-left: 50px;
}

.xl {
  transform: scale(2);
}