<body>
<div class="container">
<div class="bubble-container">
<div class="main-bubble"></div>
</div>
</div>
<script src="jquery.js"></script>
<script src="bubbles.js"></script>
</body>
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
top: 0;
left: 0;
}
.container {
display: flex;
align-items: center;
top: 0;
left: 0;
margin: 0;
padding: 0;
height: 100vh;
width: 100vw;
}
.bubble-container {
height: 50px;
width: 50px;
overflow: visible;
margin: 0 auto;
}
.new-bubble {
position: absolute;
z-index: 1;
background: rgba(0,173,239,0.4);
height: 50px;
width: 50px;
border-radius: 50%;
-webkit-animation: pop 2.5s ease-out forwards;
-moz-animation: pop 2.5s ease-out forwards;
animation: pop 2.5s ease-out forwards;
}
.main-bubble {
position: absolute;
z-index: 100;
background: #00adef;
height: 50px;
width: 50px;
border-radius: 50%;
cursor: pointer;
}
.scale-small {
-webkit-animation: small 0.2s ease-out forwards;
-moz-animation: small 0.2s ease-out forwards;
animation: small 0.2s ease-out forwards;
}
.scale-large {
-webkit-animation: large 0.4s ease-out forwards;
-moz-animation: large 0.4s ease-out forwards;
animation: large 0.4s ease-out forwards;
}
@-webkit-keyframes large {
0% {
-webkit-transform: scale(0.7);
}
33% {
-webkit-transform: scale(1.3);
}
67% {
-webkit-transform: scale(0.8);
}
100% {
-webkit-transform: scale(1);
}
}
@-moz-keyframes large {
0% {
-moz-transform: scale(0.7);
}
33% {
-moz-transform: scale(1.3);
}
67% {
-moz-transform: scale(0.8);
}
100% {
-moz-transform: scale(1);
}
}
@keyframes large {
0% {
transform: scale(0.7);
}
33% {
transform: scale(1.3);
}
67% {
transform: scale(0.8);
}
100% {
transform: scale(1);
}
}
@-webkit-keyframes small {
0% {
-webkit-transform: scale(1);
}
100% {
-webkit-transform: scale(0.7);
}
}
@-moz-keyframes small {
0% {
-moz-transform: scale(1);
}
100% {
-moz-transform: scale(0.7);
}
}
@keyframes small {
0% {
transform: scale(1);
}
100% {
transform: scale(0.7);
}
}
@-webkit-keyframes pop {
0% {
-webkit-transform: scale(0);
opacity: 1;
}
100% {
-webkit-transform: scale(15);
opacity: 0;
}
}
@-moz-keyframes pop {
0% {
-moz-transform: scale(0);
opacity: 1;
}
100% {
-moz-transform: scale(15);
opacity: 0;
}
}
@keyframes pop {
0% {
transform: scale(0);
opacity: 1;
}
100% {
transform: scale(15);
opacity: 0;
}
}
$('.main-bubble').mousedown(function(){
$(this).removeClass('scale-large');
$(this).addClass('scale-small');
});
$('.main-bubble').mouseup(function(){
$(this).removeClass('scale-small');
$(this).addClass('scale-large');
$( '<div class="new-bubble"></div>' ).insertBefore(this);
});
This Pen doesn't use any external CSS resources.