Original shot https://dribbble.com/shots/2505014-A-quick-gooey-exercise
A Pen by Alexandr Izumenko on CodePen.
Original shot https://dribbble.com/shots/2505014-A-quick-gooey-exercise
A Pen by Alexandr Izumenko on CodePen.
<div class="container"> | |
<div class="dot dot-1"></div> | |
<div class="dot dot-2"></div> | |
<div class="dot dot-3"></div> | |
</div> | |
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> | |
<defs> | |
<filter id="goo"> | |
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" /> | |
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 21 -7"/> | |
</filter> | |
</defs> | |
</svg> |
body, html { | |
width: 100%; | |
height: 100%; | |
background-color: #f8f4d5; | |
} | |
.container { | |
width: 200px; | |
height: 200px; | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
transform: translate(-50%, -50%); | |
margin: auto; | |
filter: url('#goo'); | |
animation: rotate-move 2s ease-in-out infinite; | |
} | |
.dot { | |
width: 70px; | |
height: 70px; | |
border-radius: 50%; | |
background-color: #000; | |
position: absolute; | |
top: 0; | |
bottom: 0; | |
left: 0; | |
right: 0; | |
margin: auto; | |
} | |
.dot-3 { | |
background-color: #f74d75; | |
animation: dot-3-move 2s ease infinite, index 6s ease infinite; | |
} | |
.dot-2 { | |
background-color: #10beae; | |
animation: dot-2-move 2s ease infinite, index 6s -4s ease infinite; | |
} | |
.dot-1 { | |
background-color: #ffe386; | |
animation: dot-1-move 2s ease infinite, index 6s -2s ease infinite; | |
} | |
@keyframes dot-3-move { | |
20% {transform: scale(1)} | |
45% {transform: translateY(-18px) scale(.45)} | |
60% {transform: translateY(-90px) scale(.45)} | |
80% {transform: translateY(-90px) scale(.45)} | |
100% {transform: translateY(0px) scale(1)} | |
} | |
@keyframes dot-2-move { | |
20% {transform: scale(1)} | |
45% {transform: translate(-16px, 12px) scale(.45)} | |
60% {transform: translate(-80px, 60px) scale(.45)} | |
80% {transform: translate(-80px, 60px) scale(.45)} | |
100% {transform: translateY(0px) scale(1)} | |
} | |
@keyframes dot-1-move { | |
20% {transform: scale(1)} | |
45% {transform: translate(16px, 12px) scale(.45)} | |
60% {transform: translate(80px, 60px) scale(.45)} | |
80% {transform: translate(80px, 60px) scale(.45)} | |
100% {transform: translateY(0px) scale(1)} | |
} | |
@keyframes rotate-move { | |
55% {transform: translate(-50%, -50%) rotate(0deg)} | |
80% {transform: translate(-50%, -50%) rotate(360deg)} | |
100% {transform: translate(-50%, -50%) rotate(360deg)} | |
} | |
@keyframes index { | |
0%, 100% {z-index: 3} | |
33.3% {z-index: 2} | |
66.6% {z-index: 1} | |
} |