SCSS
$slack-size: 150px;
$dot-diameter: 25px;
$slack-angle: 15deg;
$duration: 2s;
$slack-blue: #6ecadc;
$slack-yellow: #e9a820;
$slack-pink: #e01563;
$slack-green: #3eb991;
html, body {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background: #ecf0f1;
}
.slack {
position: relative;
z-index: 100;
width: $slack-size;
height: $slack-size;
transform: rotate(-$slack-angle);
}
.slack-dot {
display: block;
position: absolute;
width: $dot-diameter;
height: $dot-diameter;
border-radius: $dot-diameter/2;
mix-blend-mode: multiply;
&--a {
top: 0;
left: 0;
background-color: $slack-green;
animation: slack-animation--a $duration infinite;
transform: translateX($dot-diameter);
}
&--b {
top: 0;
right: 0;
background-color: $slack-blue;
animation: slack-animation--b $duration infinite;
transform: translateY($dot-diameter);
}
&--c {
bottom: 0;
right: 0;
background-color: $slack-yellow;
animation: slack-animation--c $duration infinite;
transform: translateX(-$dot-diameter);
}
&--d {
bottom: 0;
left: 0;
background-color: $slack-pink;
animation: slack-animation--d $duration infinite;
transform: translateY(-$dot-diameter);
}
}
@keyframes slack-animation--a {
0% {
top: 0;
bottom: auto;
height: $dot-diameter;
}
33% {
top: 0;
bottom: auto;
height: $slack-size;
}
34% {
top: auto;
bottom: 0;
height: $slack-size;
}
66% {
top: auto;
bottom: 0;
height: $dot-diameter;
}
100% {
top: auto;
bottom: $slack-size - $dot-diameter;
height: $dot-diameter;
}
}
@keyframes slack-animation--b {
0% {
right: 0;
left: auto;
width: $dot-diameter;
}
33% {
right: 0;
left: auto;
width: $slack-size;
}
34% {
right: auto;
left: 0;
width: $slack-size;
}
66% {
right: auto;
left: 0;
width: $dot-diameter;
}
100% {
right: auto;
left: $slack-size - $dot-diameter;
width: $dot-diameter;
}
}
@keyframes slack-animation--c {
0% {
bottom: 0;
top: auto;
height: $dot-diameter;
}
33% {
bottom: 0;
top: auto;
height: $slack-size;
}
34% {
bottom: auto;
top: -($slack-size - $slack-size);
height: $slack-size;
}
66% {
bottom: auto;
top: -($slack-size - $slack-size);
height: $dot-diameter;
}
100% {
bottom: auto;
top: $slack-size - $dot-diameter;
height: $dot-diameter;
}
}
@keyframes slack-animation--d {
0% {
left: 0;
right: auto;
width: $dot-diameter;
}
33% {
left: 0;
right: auto;
width: $slack-size;
}
34% {
left: auto;
right: -($slack-size - $slack-size);
width: $slack-size;
}
66% {
left: auto;
right: -($slack-size - $slack-size);
width: $dot-diameter;
}
100% {
left: auto;
right: $slack-size - $dot-diameter;
width: $dot-diameter;
}
}
