Team CodePen의 캐시디 윌리엄스 (Cassidy Williams)는 점점 더 커지고 있는 이 펜에서 CSS로 바이러스 성 비디오의 놀라운 최종 결과를 재창조합니다.

HTML : 

<div class="text">BIGGER THAN BEFORE</div>
<div class="container">
  <div class="egg"></div>
  <div class="egg biggerthanbefore"></div>
  <div class="egg evenbiggerthanbefore"></div>
</div>

CSS : 

html,
body {
  background: linear-gradient(to bottom, #131313 0%, #1c1c1c 9%, #2b2b2b 24%, #111111 40%, #2c2c2c 50%, #474747 61%, #666666 75%, #595959 88%, #4c4c4c 100%);
  height: 120%;
  margin: 0;
  padding: 0;
}

.text {
  padding: 80px 0 50px;
  color: white;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-size: 3rem;
  text-align: center;
  box-sizing: border-box;
}

.container {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-direction: row-reverse;
}
.container::before {
  position: absolute;
  display: block;
  content: '';
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 70%);
  width: 800px;
  height: 40px;
  border-radius: 50%;
  bottom: 40px;
}

.egg {
  position: relative;
  margin: 35px;
  width: 126px;
  height: 180px;
  background: linear-gradient(to bottom, white 0%, #eeeeee 53%, #cccccc 100%);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  box-shadow: inset 15px -15px 25px 5px rgba(0, 0, 0, 0.3);
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}
.egg::before {
  position: absolute;
  top: 10px;
  right: 25px;
  display: block;
  content: '';
  width: 40px;
  height: 100px;
  background: transparent;
  border-radius: 50%;
  box-shadow: inset -6px 10px 5px rgba(255, 255, 255, 0.3);
  -webkit-transform: rotate(-25deg);
          transform: rotate(-25deg);
}

.biggerthanbefore {
  width: 130px;
  height: 190px;
  background: linear-gradient(to bottom, #d6ca24 1%, #e2aa26 53%, #d39522 100%);
}

.evenbiggerthanbefore {
  width: 140px;
  height: 200px;
  background: linear-gradient(to bottom, #1a74f2 0%, #0e2881 100%);
}