<html>

<head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
  <h1>Click Below To Create Bubbles</h1>
  <div class="bubble">

  </div>
  <script src="index.js"></script>
</body>

</html>
body{
  font-family:verdana;
}
.bubble{
	position: relative;
	width: 800px; 
	height: 400px; 
	background:rgba(83,238,33,1); 
	margin: 150px auto 0;
}
.bubble ul{
	position: absolute;
	margin: 0;
	padding:0;
	list-style: none;
	width: 50px;
	height: 50px;
	border:2px solid white;
	border-radius:50%;
	background-color:rgba(255,255,255,0.4);
	animation:floatUL 6s infinite;
	animation-timing-function:linear;
}
.bubble ul::after{
	position: absolute;
	z-index: 111;
	content: '';
	top:10%;
	left: 10%;
	width: 40px;
	height: 40px;
	border-top:5px solid white;
	transform: rotate(-35deg);
	border-radius:50%;
}
.bubble ul li{
	position: absolute;
	border:2px solid white;
	border-radius:50%;
	background-color:rgba(255,255,255,0.4);

}
.bubble ul li:first-child{
	width: 20px;
	height: 20px;
	left: -150%;
	bottom: -100%;
	opacity: 1;
	animation:float 20s infinite;
	animation-timing-function:linear;
	
}
.bubble ul li:nth-child(2){
	width: 25px;
	height: 25px;
	right: 80%;
	top: -80%;
	opacity: 1;
	animation:float 8s infinite;
	animation-timing-function:linear;
}
.bubble ul li:nth-child(3){
	width: 12px;
	height: 12px;
	left: 0%;
	top: -160%;
	opacity: 1;
	animation:float 10s infinite;
	animation-timing-function:linear;
}
.bubble ul li:nth-child(4){
	width: 35px;
	height: 35px;
	left: 85%;
	bottom: 50%;
	opacity: 1;
	animation:float 8s infinite;
	animation-timing-function:linear;

}
.bubble ul li:nth-child(4)::after{
	position: absolute;
	z-index: 111;
	content: '';
	top:10%;
	left: 10%;
	width: 25px;
	height: 25px;
	border-top:3px solid white;
	transform: rotate(-35deg);
	border-radius:50%;
}

@keyframes floatUL{
	0%{
		transform: translateX(30%) translateY(-30%);
		opacity: 0.9;
	}
	50%{
		transform: translateY(-50%) translateX(50%) ;
		opacity: 0.8;

	}
	70%{
		transform: translateX(70%) translateY(-70%) ;
		opacity: 0.5;

	}
	100%{
		transform: translateY(-80%) translateX(100%) ;
		opacity: 0.0;

	}
}


@keyframes float{
	0%{
		transform: translateY(30px) rotate(60deg);
		opacity: 1;
	}
	50%{
		transform: translateY(-60px) rotate(160deg);
		opacity: 0.8;

	}
	70%{
		transform: translateY(90px) rotate(260deg);
		opacity: 0.7;

	}
	100%{
		transform: translateY(-120px;) rotate(360deg);
		opacity: 0.3;
		visibility: hidden;
	}
}


const elem = selector => document.querySelector(selector);

// Bubble Creator..................///
//***********************************************
const bubble = elem(".bubble");

bubble.addEventListener("click", e => {
  const x = e.offsetX;
  const y = e.offsetY;

  let bubbleGroup = document.createElement("ul");
  bubbleGroup.style.left = x + "px";
  bubbleGroup.style.top = y + "px";
  for (let i = 0; i < 4; i++) {
    let bb = document.createElement("li");
    bubbleGroup.appendChild(bb);
  }
  bubble.appendChild(bubbleGroup);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.