Пытаюсь создать теннисный мяч за CSS, но некоторые элементы не появляются

Question

У меня есть следующее CSS для теннисного мяча с глазами от codepen.io (https://codepen.io/Mohamed-Ayman/pen/ajzKXJ):

.tennis,
.lefteye,
.righteye {
  position: absolute;
}


.tennis {
  width:70px;
  height:70px;
  background:#A0EA11;
  border-radius:50%;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  overflow:hidden;
  box-shadow:0px 15px 24px rgba(0, 0, 0, 0.2);
  animation:jump .8s linear infinite alternate;
  &:before,
  &:after {
    content:'';
    position: absolute;
    left:12px;
    width:40px;
    height:40px;
    background:transparent;
    border:3px solid #FFF;
    border-radius:50%;
  }
  &:before {top:-28px;}
  &:after {bottom:-28px;}

  .lefteye {
    top:50%;
    left:30%;
    transform:translate(-50%, -50%);
    width:15px;
    height:15px;
    background:#FFF;
    border-radius:50%;
    &:before {
      content:'';
      position: absolute;
      top:7px;
      right:1px;
      background:#000;
      width:6px;
      height:6px;
      border-radius:50%;
    }
  }
  .righteye {
    top:50%;
    right:15%;
    transform:translate(-50%, -50%);
    width:15px;
    height:15px;
    background:#FFF;
    border-radius:50%;
    &:before {
      content:'';
      position: absolute;
      top:7px;
      right:1px;
      background:#000;
      width:6px;
      height:6px;
      border-radius:50%;
      //animation:move 2s ease infinite alternate;
    }
  }
}



@keyframes jump {
  0% {
    top:50%;
  }
  100% {
    top:30%;
    box-shadow:0px 45px 10px -5px rgba(0, 0, 0, 0.2);
  }
}

Проблема в том, что вместо того, чтобы выглядеть как на первом фото это выглядит как на втором, поэтому глаза не появляются. Я попытался немного изменить CSS, но результат не отличается. Если я закрою скобки для элемента «теннис» перед «левым глазом» и «правым глазом», форма глаз действительно появляется, но маленькие черные круги внутри них не появляются. Кто-нибудь знает что не так? И что я могу сделать?

Answer 1

Если вы заинтересованы, вот решение с одним простым элементом для вашей анимации:

.tennis {
   width:100px;
   height:100px;
   margin:20px;
   border-radius:50%;
   background:
      /*left eye*/
      radial-gradient(farthest-side,#000 99%,transparent 100%) calc(50% - 15px) calc(50% + 5px)/9px 9px,
      radial-gradient(farthest-side,#fff 99%,transparent 100%) calc(50% - 20px) 50%            /20px 20px,
      /*right eye*/
      radial-gradient(farthest-side,#000 99%,transparent 100%) calc(50% + 25px) calc(50% + 5px)/9px 9px,
      radial-gradient(farthest-side,#fff 99%,transparent 100%) calc(50% + 20px) 50%            /20px 20px,
      /*top half circle */
      radial-gradient(circle 35px at top,
            transparent calc(100% - 8px),
            #fff calc(100% - 7px) 99%,transparent 100%) top    -5px left 0,
      /*bottom half circle */
      radial-gradient(circle 35px at bottom,
            transparent calc(100% - 8px),
            #fff calc(100% - 7px) 99%,transparent 100%) bottom -5px left 0,
      /*main background*/      
      #A0EA11;
    background-repeat:no-repeat;
    box-shadow:0px 15px 24px rgba(0, 0, 0, 0.2);
}

body {
    margin: 0;
    padding: 0;
    background: #a7a446;
}

<div class="tennis"></div>