<div class="container">
  <div class="ball">
    <div class="hole">
      <div class="message-holder">
        <div class="glass">
          <p id="message">
            Welcome To Magic Eight Ball
          </p>
        </div>
      </div>
    </div>
  </div>
</div>
html,
body {
  background: rgb(238,14,202);
  background: radial-gradient(circle, rgba(238,14,202,1) 20%, rgba(0,0,0,1) 100%);
 height: 100%;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.ball {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(0,0,0);
  background: linear-gradient(315deg, rgba(0,0,0,1) 80%, rgba(120,120,120,.75) 98%); 
  width: 500px;
  height: 500px;
  border-radius: 100%;
  box-shadow: inset -25px -15px 30px rgba(90,90,90,.3);
  transition: margin .25s ease-in;
}

.hole {
  position: relative;
  height: 190px;
  width: 190px;
  background: rgb(250,250,250);
  background: linear-gradient(120deg, rgba(250,250,250,.1) 5%, rgba(18,2,55,.95) 20%); 
  border: -10px solid black;
  border-radius: 100%;

}

.glass {
  position: absolute;
  background: rgb(250,250,250);
  background: linear-gradient(120deg, rgba(250,250,250,.1) 5%, rgba(18,2,55,.95) 20%); 
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 100%;
  -webkit-filter: blur(1px);
  filter: blur(1px);
  z-index: 9999;
}

.message-holder {
  float: left;
  margin-top: 45px;
  margin-left: 20px;
  width: 0; 
  height: 0; 
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;  
  border-top: 135px solid #a2a2a2;
  transition: opacity 2s ease-in-out;
}

#message {
  color: white;
  font-size: 18px;
  text-align: center;
  margin: 60px auto;
  width: 50%;
  transition: opacity 2.5s ease-in;
}


.shake {
  animation: shake 4s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}
const holder = document.querySelector('.message-holder')
const message = document.querySelector('#message');
const ball = document.querySelector('.ball');
const messages = [ "It is certain", "It is decidedly so", "Without a doubt", "Yes definitely", "You may rely on it", "As I see it, yes", "Most likely", "Outlook good", "Yes", "Signs point to yes", "Reply hazy try again", "Ask again later", "Better not tell you now", "Cannot predict now", "Concentrate and ask again", "Don't count on it", "My reply is no", "My sources say no", "Outlook not so good", "Very doubtful" ]


fadeInAnimation = function(){  
    setTimeout(function(){
    ball.classList.remove('shake');
    holder.style.opacity = 1;
    message.style.opacity = 1;
    message.innerHTML = messages[Math.floor(Math.random()*messages.length)];
  }, 4000)
  
};

fadeOutAnimation = function(callback){
  holder.style.opacity = 0;
  message.style.opacity =0;  
  callback();
}

ball.addEventListener('click', function() {
  ball.classList.add('shake');
  fadeOutAnimation(fadeInAnimation);

})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.