<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.p {
position: absolute;
width: 100px;
height: 100px;
color: inherit;
background-color: currentColor;
border-radius: 50%;
border: 1px solid currentColor;
-webkit-animation: blast 3s infinite ease-in;
animation: blast 3s infinite ease-in;
}
.p1 {
-webkit-animation-delay: -5;
animation-delay: -5;
}
.p2 {
-webkit-animation-delay: -5.5s;
animation-delay: -5.5s;
}
.p3 {
-webkit-animation-delay: -6s;
animation-delay: -6s;
}
.p4 {
-webkit-animation-delay: -6.5s;
animation-delay: -6.5s;
}
.p5 {
-webkit-animation-delay: -7s;
animation-delay: -7s;
}
.p6 {
-webkit-animation-delay: -7.5s;
animation-delay: -7.5s;
}
body {
background-color: black;
/* filter: blur(1px); */
-webkit-animation: color 20s infinite;
animation: color 20s infinite;
}
@-webkit-keyframes color {
0% {
color: red;
}
33% {
color: green;
}
66% {
color: blue;
}
100% {
color: red;
}
}
@keyframes color {
0% {
color: red;
}
33% {
color: green;
}
66% {
color: blue;
}
100% {
color: red;
}
}
@-webkit-keyframes blast {
from {
transform: scale(0);
opacity: 1;
}
to {
transform: scale(1);
opacity: 0;
}
}
@keyframes blast {
from {
transform: scale(0);
opacity: 1;
}
to {
transform: scale(1);
opacity: 0;
}
}
</style>
</head>
<body>
<div></div>
<script type="text/javascript">
var final = "";
var vh = window.innerHeight;
var vw = window.innerWidth;
var count = 12;
function a(x) {
var s = '<div class="p p' + x + '" style="';
var s3 = "></div>";
for (var i = 0; i < count; i++) {
var h = Math.random() * 300;
var s2 = "width:" + h + "px;height:" + h + "px;";
var x = Math.random() * (vw - h);
var y = Math.random() * (vh - h);
var blur = Math.random() * 30;
var pos = "left:" + x + "px;top:" + y + "px;filter: blur(" + blur + 'px)"';
final += s + s2 + pos + s3;
}
}
a(1);
a(2);
a(3);
a(4);
a(5);
a(6);
document.getElementsByTagName('body')[0].innerHTML = final;
</script>
</body>
</html>
