floating-cats.css


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
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)));
    }
}