Tableau_Animation/Style.css at main · shamirna-antony/Tableau_Animation · GitHub

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
/*html {
    --s: 50px;
    --c: #202A44;
    background-color: var(--c);
    background-attachment: fixed;
}*/
html, body {
  padding: 0;
  margin: 0;
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
  background: linear-gradient(#7d57a3, #7d57a3);
}

/* Customizable snowflake styling */
.snowflake {
    color: #fff;
    font-size: 2em;
    font-family: Arial, sans-serif;
    text-shadow: 0 0 4px #00BFFF;
}

.snowflake, .snowflake .inner {
    animation-iteration-count: infinite;
    animation-play-state: running;
}

@keyframes snowflakes-fall {
    0% { transform: translateY(0); }
    100% { transform: translateY(110vh); }
}

@keyframes snowflakes-shake {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(40px); }
}

.snowflake {
    position: fixed;
    top: -10%;
    z-index: 9999;
    user-select: none;
    cursor: default;
    animation-name: snowflakes-shake;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
}

.snowflake .inner {
    animation-duration: 10s;
    animation-name: snowflakes-fall;
    animation-timing-function: linear;
}

/* Add the following lines to set different sizes for each snowflake */
.snowflake:nth-of-type(1) { font-size: 2em; }
.snowflake:nth-of-type(2) { font-size: 1.2em; }
.snowflake:nth-of-type(3) { font-size: 0.8em; }
.snowflake:nth-of-type(4) { font-size: 1.5em; }
.snowflake:nth-of-type(5) { font-size: 2em; }
.snowflake:nth-of-type(6) { font-size: 1.3em; }
.snowflake:nth-of-type(7) { font-size: 1em; }
.snowflake:nth-of-type(8) { font-size: 1.8em; }
.snowflake:nth-of-type(9) { font-size: 1.4em; }
.snowflake:nth-of-type(10) { font-size: 2em; }
.snowflake:nth-of-type(11) { font-size: 0.7em; }
.snowflake:nth-of-type(12) { font-size: 1.2em; }

/* Specific positions and delays for each snowflake */
.snowflake:nth-of-type(1) { left: 1%; animation-delay: 0s; }
.snowflake:nth-of-type(1) .inner { animation-delay: 0s; }
.snowflake:nth-of-type(2) { left: 10%; animation-delay: 1s; }
.snowflake:nth-of-type(2) .inner { animation-delay: 1s; }
.snowflake:nth-of-type(3) { left: 20%; animation-delay: 0.5s; }
.snowflake:nth-of-type(3) .inner { animation-delay: 6s; }
.snowflake:nth-of-type(4) { left: 30%; animation-delay: 2s; }
.snowflake:nth-of-type(4) .inner { animation-delay: 4s; }
.snowflake:nth-of-type(5) { left: 40%; animation-delay: 2s; }
.snowflake:nth-of-type(5) .inner { animation-delay: 2s; }
.snowflake:nth-of-type(6) { left: 50%; animation-delay: 3s; }
.snowflake:nth-of-type(6) .inner { animation-delay: 8s; }
.snowflake:nth-of-type(7) { left: 60%; animation-delay: 2s; }
.snowflake:nth-of-type(7) .inner { animation-delay: 2.5s; }
.snowflake:nth-of-type(8) { left: 70%; animation-delay: 1s; }
.snowflake:nth-of-type(8) .inner { animation-delay: 2.5s; }
.snowflake:nth-of-type(9) { left: 80%; animation-delay: 0s; }
.snowflake:nth-of-type(9) .inner { animation-delay: 3s; }
.snowflake:nth-of-type(10) { left: 90%; animation-delay: 1.5s; }
.snowflake:nth-of-type(10) .inner { animation-delay: 3s; }
.snowflake:nth-of-type(11) { left: 25%; animation-delay: 0s; }
.snowflake:nth-of-type(11) .inner { animation-delay: 0s; }
.snowflake:nth-of-type(12) { left: 65%; animation-delay: 2.5s; }