<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Snooker Table</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="wrapper">
    <div class="snooker">
        <div class="pocket">
          <div class="pocket-top-right"></div>
          <div class="pocket-top-left"></div>
          <div class="pocket-bottom-right"></div>
          <div class="pocket-bottom-left"></div>
        </div>
        <div class="ball white-ball"></div>
        <div class="ball ball-1">1</div>
        <div class="ball ball-2">2</div>
        <div class="ball ball-3">3</div>
        <div class="ball ball-4">4</div>
        <div class="ball ball-5">5</div>
        <div class="ball ball-6">6</div>
        <div class="ball ball-7">7</div>
        <div class="ball ball-8">8</div>
        <div class="ball ball-9">9</div>
        <div class="ball ball-10">10</div>
        <div class="ball ball-11">11</div>
        <div class="ball ball-12">12</div>
        <div class="ball ball-13">13</div>
        <div class="ball ball-14">14</div>
        <div class="ball ball-15">15</div>
        <div class="poll"><div></div></div>
    </div>
  </div>
   <div class="footer"><p>Created by <a href="https://www.rembertdesigns.co/" target="_blank">Richard Rembert</a></p>
    </div>
</body>
</html>
:root{
  --top1: 46%;
  --top2: 47%;
  --top3: 48%;
  --top4: 49%;
  --top5: 50%;
}

*, *::before, *::after{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  overflow: hidden;
  background-color: whitesmoke;
}
.wrapper{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  flex-direction: column;
}
.snooker{
  position: relative;
  width: 70%;
  height: 60%;
  min-height: 500px;
  max-height: 600px;
  max-width: 960px;
  margin-right: 20%;
  background-clip: border-box;
  border:0;
  background-color: #5b49be;
  /* background-image: radial-gradient(circle, #93f07b, #64cf50); */
  background-image: linear-gradient(90deg, rgba(255,255,255,.07) 90%, transparent 90%),
                    linear-gradient(90deg, rgba(255,255,255,.03) 90%, transparent 90%),
                    linear-gradient(90deg, transparent 90%, rgba(255,255,255,.07) 90%),
                    linear-gradient(90deg, transparent 90%, rgba(255,255,255,.09) 90%);
  background-size: 13px, 29px, 37px, 53px;

  box-shadow: inset 20px 20px #1f0076,
              inset -20px -20px #1a0076,
              inset 22px 22px 4px #000,
              inset -22px -22px 4px #000;
}
.snooker::before{
  content: '';
  display: block;
  width: calc(100% + 50px);
  height: calc(100% + 50px);
  border-color: #000000;
  border-style: solid;
  border-width: 25px;
  background-color: transparent;
  position: absolute;
  top: -25px;
  left: -25px;
  right: 0;
  bottom: 0;
  border-radius: 5%;
}
.snooker::after{
  content: '';
  display: block;
  width: 50%;
  background-color:rgba(0,0,0,.22);
  filter:blur(50px);
  position: absolute;
  top: 20px;
  left: 20px;
  bottom: 20px;
}

.pocket{
  width: 100%;
  height: 100%;
}
.pocket > div{
  position: absolute;
  background: transparent;
  width: 60px;
  height: 60px;
  border-radius:20% 0 20% 20%;
  box-shadow:-15px 15px #d6d6d6;
  /* overflow: hidden; */
}

.pocket-top-right{
  top: -20px;
  right: -20px;
  transform: translate(-20px,20px) rotate(180deg);
}
.pocket-bottom-right{
  bottom: -20px;
  right: -20px;
  transform: translate(-20px,-20px) rotate(-90deg);
}
.pocket-top-left{
  top: -20px;
  left: -20px;
  transform: translate(20px,20px) rotate(90deg);
  box-shadow:-15px 15px #d6d6d6 !important;
}
.pocket-bottom-left{
  bottom: -20px;
  left: -20px;
  transform: translate(20px,-20px);
  box-shadow:-15px 15px #d6d6d6 !important;
}

.pocket > div::before{
  content: '';
  display: block;
  position: absolute;
  width: 70%;
  height: 70%;
  border-radius:50%;
  background-color: #033601;
  bottom: -5px;
  left: -5px;
  z-index: 2;
  box-shadow: inset 15px -10px 5px rgba(2,34,1,.8);
}
.pocket-bottom-right::after{
  content: '';
  display: block;
  position: absolute;
  border-radius:100% 30%;
  box-shadow:-25px -15px 10px #FFF;
  background-color: transparent;
  width: 10px;
  height: 30px;
  transform: rotate(80deg) translate(150px,-50px) scale(12);
  opacity: .65;
}

/* SNOOKE BALL */

.ball{
  width: 32px;
  height: 32px;
  border-radius: 50%;
  position: absolute;
  z-index: 3;
  -webkit-perspective: 600;
  box-shadow: inset 4px 5px 3px rgba(0,0,0,.15),
              inset -4px -2px 5px rgba(0,0,0,.2),
              inset 6px -10px 5px rgba(0,0,0,.1),
              4px 5px 3px rgba(0,0,0,.2);
}
.white-ball{
  background-color: #FFF;
  left: 80%;
  top: var(--top5);
  animation: roll-ball-white .5s ease-out 5.8s forwards;
}
.white-ball::before{
  content:'';
  background-color: #FFF;
  width: 15px;
  height: 35px;
  display: block;
  position: absolute;
  right: 0;
  filter: blur(6px);
  opacity: 0;
  animation: smoke .3s ease alternate 5.7s 1;
}
.ball:not(.white-ball){
  text-align: center;
  line-height: 2.1rem;
  font-weight: bold;
  font-size: .7rem;
  letter-spacing: -1px;
}
.ball:not(.white-ball)::before{
  content: '';
  display: block;
  border-radius: 50%;
  background-color: rgba(255,255,255,.8);
  width: 15px;
  height: 15px;
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

.ball-1{
  background-color: #b78b22;
  left: 10%;
  top: calc(var(--top1) - 62px);
  animation: left-top 1s ease-out 6.2s 1 forwards,
             hide-ball .5s ease 7.1s 1 forwards;
}
.ball-2{
  background-color: #004882;
  left: 10%;
  top: calc(var(--top1) - 28px);
  animation: rotate360 11s ease-out 6.2s 1 forwards;
}
.ball-3{
  background-color: #aa0122;
  left: 10%;
  top: calc(var(--top1) + 6px);
  animation: shake-ball3 8s linear 6.2s 1 forwards,
             hide-ball .5s ease 11s 1 forwards;
}
.ball-4{
  background-color: #4d2969;
  left: 10%;
  top: calc(var(--top1) + 40px);
  animation: shake-ball4 4s ease-out 6.2s 1 forwards;
}
.ball-5{
  background-color: #ca4a00;
  left: 10%;
  top: calc(var(--top1) + 74px);
  animation: left-bottom 1s ease-out 6.2s 1 forwards,
             hide-ball .5s ease 7.1s 1 forwards;
}
.ball-6{
  background-color: #006a50;
  left: calc(10% + 32px);
  top: calc(var(--top2) + 18px);
  animation: rotate180 10s ease-out 6.2s 1 forwards;
}
.ball-7{
  background-color: #5e311c;
  left: calc(10% + 32px);
  top: calc(var(--top2) - 15px);
  animation: rotate360 9s ease-out 6.2s 1 forwards;
}
.ball-8{
  background-color: #000;
  left: calc(10% + 32px);
  top: calc(var(--top2) - 48px);
  animation: shake-ball8 4s ease-out 6.2s 1 forwards;
}
.ball-9{
  background-color: #b78b22;
  left: calc(10% + 32px);
  top: calc(var(--top2) + 52px);
  animation: shake-ball9 3s ease-out 6.2s 1 forwards;
}
.ball-10{
  background-color: #004882;
  left: calc(10% + 64px);
  top: calc(var(--top3) + 35px);
  animation: shake-ball10 3s ease-out 6.2s 1 forwards;
}
.ball-11{
  background-color: #aa0122;
  left: calc(10% + 64px);
  top: calc(var(--top3) - 35px);
  animation: shake-ball11 3s ease-out 6.2s 1 forwards;
}
.ball-12{
  background-color: #4d2969;
  left: calc(10% + 64px);
  top: var(--top3);
  animation: rotate180 6s ease-out 6.2s 1 forwards;
}
.ball-13{
  background-color: #ca4a00;
  left: calc(10% + 96px);
  top: calc(var(--top4) - 15px);
  animation: rotate180 2s ease-out 6.2s 1 forwards;
}
.ball-14{
  background-color: #006a50;
  left: calc(10% + 96px);
  top: calc(var(--top4) + 18px);
  animation: rotate180 8s ease-out 6.2s 1 forwards;
}
.ball-15{
  background-color: #5e311c;
  left: calc(10% + 125px);
  top: calc(var(--top5) - 2px);
  animation: rotate360 4s ease-out 6.2s 1 forwards;
}
.poll{
  width: 500px;
  height: 12px;
  background-color:#cea36c;
  position: absolute;
  top: calc(var(--top5) + 12px);
  right: calc(5% - 500px);
  border-radius: 30% 40% 30% 40%;
  z-index: 9;
  animation: shot 6s ease 1 forwards,
             poll-move-back .5s ease 1 6s forwards;
}

.poll div{
  width: 150px;
  display: block;
  position: absolute;
  background-color: #743700;
  height: 12px;
  z-index: 10;
  right: 0;
  top: 0;
  border-radius: 0 15% 15% 0;
  box-shadow: inset 5px 5px 5px rgba(0,0,0,.4);
}
.poll div::before{
  content: '';
  width: 100%;
  height: 0;
  background: transparent;
  display: block;
  position: absolute;
  top: 20%;
  border:1px solid rgba(255,255,255,.4);
}
.poll div::after{
  content: '';
  width: 7px;
  height: 8px;
  background: #000;
  display: block;
  position: absolute;
  top: 2px;
  right: -7px;
  border-radius: 0 20% 20% 0;
}
.poll::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  background: transparent;
  width: 100%;
  height: 6px;
  z-index: 12;
  border-radius: 0 0 0 50%;
  box-shadow: 0 7px 4px rgba(0,0,0,.3);
}
.poll::after{
  content: '';
  position: absolute;
  top: 3px;
  left: -10px;
  display: block;
  background: #fbedad;
  width: 10px;
  height: 5px;
  z-index: 12;
  box-shadow: inset 4px 0 #000,
              inset 2px 2px 4px rgba(0,0,0,.2);
  border-radius:0 20% 0 20%; 
}

@media only screen and (max-width: 800px){
  .ball-3{
    animation: rotate360 4s ease-out 6.2s 1 forwards;
  }
}
@keyframes shot{
  10%{
    right:calc(5% - 500px);
  }
  20%{
    right: calc(5% - 480px)
  }
  30%{
    right: calc(5% - 500px)
  }
  40%{
    right: calc(5% - 480px)
  }
  50%{
    right: calc(5% - 500px)
  }
  60%{
    right: calc(5% - 480px)
  }
  70%{
    right: calc(5% - 500px)
  }
  80%{
    right: calc(5% - 480px)
  }
  90%{
    right: calc(5% - 600px)
  }
  100%{
    right: calc(10% - 440px)
  }
}

@keyframes poll-move-back{
  100%{
    right: calc(5% - 520px);
  }
}

@keyframes roll-ball-white{
  100%{
    left: calc(10% + 160px);
    transform: rotate(360deg);
  }
}

@keyframes smoke{
  100%{
    opacity: .7;
  }
}
@keyframes hide-ball{
  100%{
    opacity: 0;
  }
}
@keyframes left-top{
  100%{
    left: 0;
    top: 0;
    transform: rotate(360deg);
  }
}
@keyframes left-bottom{
  100%{
    left: 0;
    top: calc(100% - 30px);
    transform: rotate(360deg);
  }
}
@keyframes shake-ball8{
  100%{
    top: 10%;
    transform: rotate(360deg);
  }
}
@keyframes shake-ball11{
  100%{
    top: 20%;
    transform: rotate(360deg);
  }
}
@keyframes shake-ball9{
  100%{
    top: calc(60% + 52px);
    left: calc(10% + 50px);
    transform: rotate(360deg);
  }
}
@keyframes shake-ball10{
  100%{
    left: calc(10% + 74px);
    top: 68%;
    transform: rotate(360deg);
  }
}
@keyframes shake-ball4{
  100%{
    left: 20px;
    top: calc(var(--top1) + 45px);
    transform: rotate(360deg);
  }
}
@keyframes shake-ball3{
  2%{
    left: 18px;
    top: 46%;
    transform: rotate(0deg);
    -webkit-transform: rotate3d(0deg);
  }
  10%{
    left: 200px;
    top: 18px;
    transform: rotate(360deg);
    -webkit-transform: rotate3d(360deg);
  }
  25%{
    left: 400px;
    top: calc(100% - 54px);
    transform: rotate(0deg);
    -webkit-transform: rotate3d(0deg);
  }
  60%{
    left: calc(100% - 30px);
    top: 0;
    transform: rotate(360deg);
    -webkit-transform: rotate3d(360deg);
  }
  100%{
    left: calc(100% - 30px);
    top: 0;
    transform: rotate(360deg);
    -webkit-transform: rotate3d(360eg);
  }
}
@keyframes rotate360{
  100%{
    transform: rotate3d(360deg);
  }
}
@keyframes rotate180{
  100%{
    transform: rotate3d(180deg);
  }
}
.footer {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 1rem;
	background-color: #000;
	text-align: center;
  }
  .footer p {
  text-decoration: none;
  color: #fff;
  }
  .footer a {
	text-decoration: none;
	color: yellow;
  }
  .footer a:hover {
	text-decoration: underline;
	color: red;
  }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.