<div class="slime">
	<div class="ball"></div>
	<div class="ball"></div>
	<div class="ball"></div>
      <div class="rope_perspective">
    <div style="--i:1" class="rope"></div>
    <div style="--i:2" class="rope"></div>
    <div style="--i:3" class="rope"></div>
    <div style="--i:4" class="rope"></div>
    <div style="--i:5" class="rope"></div>
    <div style="--i:6" class="rope"></div>
    <div style="--i:7" class="rope"></div>
    <div style="--i:8" class="rope"></div>
    <div style="--i:9" class="rope"></div>
    <div style="--i:10" class="rope"></div>
    <div style="--i:11" class="rope"></div>
    <div style="--i:12" class="rope"></div>
    <div style="--i:13" class="rope"></div>
    <div style="--i:14" class="rope"></div>
    <div style="--i:15" class="rope"></div>
    <div style="--i:16" class="rope"></div>
    </div>
    </div>

    <div class="shadow"></div>
body{
  background:black;
  overflow:hidden;
}
.slime{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			height: 100%;
			width: 100%;
			background-color: black;
			filter: contrast(50);
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.ball{
			position: absolute;
			min-height:80px;
      min-width:80px;
      height:10%;
      width:5%;
			border-radius:50%;
			background: red;
			transition: 0.4s;
			filter: blur(25px);
			margin-top: 100px;
			z-index: 10;
		}
		@keyframes bounce_one{
			0% {
             transform: translateY(0px)translateX(40px)scale(1,0.7);
			}
			
	100%{
            transform: translateY(-200px);
			}
		}
		@keyframes bounce_two{
			0%{
             transform: translateY(0px)translateX(-40px)scale(1,0.7);
			}

			100%{
				transform: translateY(-210px);
			}
		}
		
.ball:nth-child(1){
			animation: bounce_one 0.4s infinite alternate;
			
			

		}


		.ball:nth-child(2){
			animation: bounce_two 0.4s infinite alternate;
			
			

		}
		.ball:nth-child(3){
			
            animation:bounce_tiny 0.4s 0.1s infinite alternate;
		}
		@keyframes bounce_tiny{
			0% {
             transform: translateY(-80px)translateX(10px)scale(0.15,0.4);
			}



	    100%{
            transform: translateY(-300px)translateX(10px)scale(0.25,0.15);
			}
				}


		.shadow{
			position: absolute;
			background-color: red;
			top:50%;
			left: 50%;
			transform: translate(-50%,-50%)rotateX(75deg);
			height:4%;
			width: 3%;
			border-radius: 50%;
			z-index:1;
			margin-top:60px;
			margin-left:10px;
			opacity: 0.7;
			animation: shadow 0.4s infinite alternate;
			filter: blur(10px);
		}
		@keyframes shadow{
			from{
               transform:translate(-50%,-50%)rotateX(80deg)scale(2)translateZ(-10px); 
			}
			to{
               transform:translate(-50%,-50%)rotateX(80deg)scale(0.1)translateZ(-10px);
			}
		}
	
    .rope{
    	position: absolute;
    	top: 50%;
    	left: 50%;
    	transform: translate(-50%,-50%);
    	width:200px;
    	height:400px;
    	background:transparent;
    	border:2px solid white;
    	border-radius: 50% 50% 0 0;
    	transform-style: preserve-3d;
    	z-index: 2;
    	clip-path: polygon(0 0,100% 0,100% 50%,0 50%);
    	animation: rotate_line_front 0.8s  linear  infinite;
    }



    @keyframes rotate_line_front{
    	0%{
           transform:translate(-50%,-50%)rotateX(360deg)translateZ(calc(var(--i)*0.3px))skew(2deg)scale(1);
           opacity: 1;
    	}
    	50%{
    		transform:translate(-50%,-50%)rotateX(180deg)scale(1,0.6)translateZ(calc(var(--i)*0.3px))skew(-2deg);
    		opacity: 1;
    		z-index: -1;
        border-color:white;
    		
    	}
    	100%{
    		transform:translate(-50%,-50%)rotateX(0deg)translateZ(calc(var(--i)*0.3px))skew(2deg)scale(1);
    		z-index: -1;
    		border-radius: 50% 50% 0 0;
    	}
    }

.rope_perspective{
  perspective:600px;
  animation:back_forth 0.8s linear infinite;
}
@keyframes back_forth{
  0%,50%{
    z-index:200;
  }
  
  51%,100%{
    z-index:0;
  }
}
var ball=document.getElementsByClassName('ball');
var shadow=document.getElementsByClassName('shadow')[0];
var color=['blue','#68FF00','#FF00FF','red'];
var j=0;
var c;
setInterval(function(){
if(j>3){
	j=0;
}
c=color[j];
  shadow.style.background=c;
for(var i=0;i<ball.length;i++){
ball[i].style.background=c;
}
j++;
},1000);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.