Floating Cats 0.1

1 files changed, 48 insertions, 0 deletions

diff --git a/floating-cats.css b/floating-cats.css
new file mode 100644
index 0000000..6380668
--- /dev/null
+++ b/floating-cats.css
@@ -0,0 +1,48 @@
+:root {
+    --floating-cats-floating-delay: 0s;
+    --floating-cats-floating-width: 8rem;
+    --floating-cats-floating-height: 8rem;
+
+    --floating-cats-top: 0;
+    --floating-cats-left: 0;
+}
+
+.floating-cats-clickthru {
+    pointer-events: none;
+}
+
+.floating-cats-floating {
+    position: fixed;
+    top: var(--floating-cats-top);
+    left: var(--floating-cats-left);
+    z-index: 10000;
+    width: min-content;
+    height: min-content;
+}
+
+.floating-cats-floating img {
+    max-width: var(--floating-cats-floating-width);
+    max-height: var(--floating-cats-floating-height);
+}
+
+.floating-cats-floating-x {
+    animation: floating-cats-floating-x 16s linear infinite alternate;
+    animation-delay: var(--floating-cats-floating-delay);
+}
+
+.floating-cats-floating-y {
+    animation: floating-cats-floating-y 9s linear infinite alternate;
+    animation-delay: var(--floating-cats-floating-delay);
+}
+
+@keyframes floating-cats-floating-x {
+    100% {
+        transform: translateX(calc(100vw - var(--floating-cats-floating-width)));
+    }
+}
+
+@keyframes floating-cats-floating-y {
+    100% {
+        transform: translateY(calc(100vh - var(--floating-cats-floating-height)));
+    }
+}