2024/04/26 Yarn Experiment

Worked on a little css experiment, the idea is that you see a ball of yarn, hovering over it bring a cat's paw towards it, and clicking it makes the cat paw grab it and take it away 

The trick to it was doing it entirely in CSS. The way it works is:
first: we use the hover pseudo-class to transition that bottom margin of the yarn ball. This margin seperate the yarn ball from the cat's paw.
then: to make the the paw grab the yarn ball, we make the yarn ball a label for a invisible checkmark, and then use the checked pseudo-class as to transition the margin of the invisible checkbox to be large enough to go off the screen, on a one second beleif, and during the 1 second delay, we a combination of the checked pseudo-class and next child selector to make the yarn ball's margin negative, so that the paw goes into the yarn ball as if to grab it. this gives the affect of it being grabbed and dragged away.