SCSS
$bg: #2a80b9;
$smallDiameter: 55px;
$bigDiameter: 100px;
$smallColor: hsla(50,100%,100%,.9);
$bigColor: $smallColor;
* {
margin: 0;
padding: 0;
}
html {
width: 100%;
height: 100%;
background: $bg;
-webkit-filter: contrast(100);
filter: contrast(100);
}
body {
min-height: 100%;
background: $bg;
display: flex;
align-items: center;
justify-content: center;
-webkit-filter: contrast(100);
filter: contrast(10);
}
#container {
animation: move 2s infinite alternate cubic-bezier(0.645, 0.045, 0.355, 1.000);
}
.ball {
width: $smallDiameter;
height: $smallDiameter;
background: $smallColor;
float: left;
margin: 25px;
border-radius: 100%;
-webkit-filter: blur(20px);
filter: blur(20px);
}
.bigball {
width: $bigDiameter;
height: $bigDiameter;
background: $bigColor;
border-radius: 100%;
-webkit-filter: blur(20px);
filter: blur(20px);
position: absolute;
top: 50%;
left: 50%;
margin-top: -$bigDiameter / 2;
margin-left: -$bigDiameter / 2;
}
@keyframes move {
0% {
transform: translate(55%, 0%);
}
100% {
transform: translate(-55%, 0);
}
}
