<div class="container">
<div class="anim-container">
<ul id="scene">
<li class="layer first">
<div></div>
</li>
<li class="layer second">
<div></div>
</li>
<li class="layer third">
<div></div>
</li>
</ul>
</div>
</div>
<div>Hello</div>
html,
body {
margin: 0;
padding: 0;
}
.container {
height: 450px;
width: 100%;
background: linear-gradient(209deg, #9dcd2b, #21a343);
}
.anim-container {
position: absolute;
right: 0;
top: 0;
width: 600px;
height: 450px;
}
#scene {
list-style: outside none;
height: 450px;
width: 600px;
padding: 0;
margin: 0;
}
ul li {
list-style: outside none;
position: absolute;
width: 800px;
height: 450px;
right: 0; top: 0;
animation: blurIntro 2s;
overflow: hidden;
}
ul li div {
position: absolute;
border-radius: 50%;
opacity: 0.5;
}
@keyframes blurIntro {
0% {
filter: blur(500px);
}
100% {
filter: blur(0px);
}
}
@keyframes blink {
50% {
opacity: 1;
}
}
.first div {
width: 580px;
height: 580px;
background: linear-gradient(25deg, #9dcd2b 0%, #21a343 100%);
top: 70px;
right: 20px;
animation: blink 15s infinite 12s;
}
.second div {
width: 310px;
height: 310px;
background: linear-gradient(135deg, #9dcd2b 0%, #21a343 100%);
top: 150px;
right: -80px;
animation: blink 15s infinite 0s;
}
.third div {
width: 180px;
height: 180px;
background: linear-gradient(210deg, #9dcd2b 0%, #21a343 100%);
top: -50px;
right: 140px;
animation: blink 15s infinite 4s;
}
/*$('#scene').parallax({
frictionX: 0.01,
frictionY: 0.01
});*/
moveBubbles();
setInterval(function(){
moveBubbles();
}, 7000);
function moveBubbles () {
$('#scene li div').each(function() {
var random = Math.ceil(Math.random() * 20);
var random2 = Math.ceil(Math.random() * 50);
var whatWay = Math.ceil(Math.random() * 2);
if(whatWay == 1) {
$(this).transition({
x: "+=" + random + "",
y: "+=" + random2 + "",
rotate: "+=" + random + ""
}, 7000, "linear");
} else {
$(this).transition({
x: "-=" + random + "",
y: "-=" + random2 + "",
rotate: "+=" + random2 + ""
}, 7000, "linear");
}
});
}
This Pen doesn't use any external CSS resources.