Skip to content

Instantly share code, notes, and snippets.

@gAlleb
Created December 25, 2023 11:34
Show Gist options
  • Save gAlleb/44f4d615f22e11a6cfb78af1d9969078 to your computer and use it in GitHub Desktop.
Save gAlleb/44f4d615f22e11a6cfb78af1d9969078 to your computer and use it in GitHub Desktop.
Snowflakes_Azuracast
.snowflakes-container {
overflow: hidden;
filter: drop-shadow(0 0 10px #65b2e4);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0
}
.snowflake {
position: absolute;
width: 15px;
height: 15px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 296 296'%3E%3Cpath fill='%2365b2e4' d='M249.99 184.88a7.48 7.48 0 0 0-12.1 1.24l-2.14 3.72-12.84-7.42 19.4-12.41a7.5 7.5 0 1 0-8.08-12.64l-25.13 16.08L190.48 148l18.85-25.75 24.6 16.81a7.47 7.47 0 0 0 10.43-1.96 7.5 7.5 0 0 0-1.96-10.43l-19.85-13.55 13.2-7.62 2.46 4.25a7.5 7.5 0 0 0 12.13 1.2L275.6 82.2a7.5 7.5 0 0 0-7.16-12.3l-37.38 7.8a7.5 7.5 0 0 0-4.96 11.09l2.15 3.72-12.85 7.41-1.05-23.02a7.5 7.5 0 0 0-14.98.69l1.34 29.47-31.88 3.47-12.63-28.65 26.36-13.66a7.5 7.5 0 0 0 3.2-10.11 7.82 7.82 0 0 0-10.37-3.21l-20.73 10.6V51h4.85a7.47 7.47 0 0 0 6.93-10.3L154.7 5.02A7.36 7.36 0 0 0 147.6 0h-.02a7.38 7.38 0 0 0-7.1 4.97L128.2 41.1a7.5 7.5 0 0 0 7.1 9.9h4.37v14.91l-21.4-10.4a7.35 7.35 0 0 0-9.86 3.5 7.53 7.53 0 0 0 3.58 10.02l26.3 12.61-12.73 28.9L95 107.2l1.34-29.45a7.5 7.5 0 1 0-14.98-.68L80.3 100.1l-12.55-7.25 2.14-3.72a7.5 7.5 0 0 0-4.96-11.09l-37.37-7.8a7.5 7.5 0 0 0-7.17 12.3l25.28 28.75a7.5 7.5 0 0 0 12.12-1.2l2.46-4.25 12.91 7.46-19.85 13.55a7.5 7.5 0 0 0 8.46 12.39l23.84-16.28L103.94 148l-18.13 24.77-24.34-15.57a7.5 7.5 0 0 0-8.08 12.64l19.41 12.41-12.56 7.25-2.14-3.71a7.5 7.5 0 0 0-12.1-1.25l-25.44 28.47a7.5 7.5 0 0 0 7.07 12.35l37.54-7.5a7.5 7.5 0 0 0 5.02-11.11l-2.46-4.26 12.92-7.45L82.47 219a7.5 7.5 0 1 0 14.96-1.13l-2.2-29.1 30.35-3.3 12.61 28.61-26.14 12.56a7.5 7.5 0 0 0-3.51 10 7.2 7.2 0 0 0 9.74 3.52l21.38-10.4V245h-4.36a7.47 7.47 0 0 0-7.1 9.84l12.26 36.2a7.38 7.38 0 0 0 7.1 4.96h.03a7.36 7.36 0 0 0 7.1-5.02l11.93-36.14a7.5 7.5 0 0 0-7.12-9.84h-4.84v-14.83l20.73 10.6c1.1.57 2.42.84 3.58.84a7.6 7.6 0 0 0 6.74-4.05c1.9-3.68.5-8.2-3.18-10.1l-26.22-13.6 12.52-28.4 31.65 3.45-2.21 29.12a7.5 7.5 0 0 0 14.96 1.14l1.82-23.96 13.2 7.62-2.45 4.25a7.5 7.5 0 0 0 5.02 11.1l37.54 7.52a7.5 7.5 0 0 0 7.06-12.35L250 184.87z'/%3E%3C/svg%3E")
}
.snowflake:nth-child(1) {
opacity: .71184;
transform: translate(19.0821vw,-10px) scale(.6241);
animation: fall-1 77.3s -27s linear infinite
}
@keyframes fall-1 {
48.467% {
transform: translate(22.3075vw,48.467vh) scale(.6241) rotate(180deg)
}
to {
transform: translate(20.6948vw,100vh) scale(.6241) rotate(360deg)
}
}
.snowflake:nth-child(2) {
opacity: .20704;
transform: translate(39.453vw,-10px) scale(.6785);
animation: fall-2 56.3s -59s linear infinite
}
@keyframes fall-2 {
46.759% {
transform: translate(33.2538vw,46.759vh) scale(.6785) rotate(180deg)
}
to {
transform: translate(36.3534vw,100vh) scale(.6785) rotate(360deg)
}
}
.snowflake:nth-child(3) {
opacity: .66664;
transform: translate(86.5788vw,-10px) scale(.4349);
animation: fall-3 81.3s -48s linear infinite
}
@keyframes fall-3 {
64.621% {
transform: translate(82.5017vw,64.621vh) scale(.4349) rotate(180deg)
}
to {
transform: translate(84.54025vw,100vh) scale(.4349) rotate(360deg)
}
}
.snowflake:nth-child(4) {
opacity: .04992;
transform: translate(52.1778vw,-10px) scale(.1189);
animation: fall-4 65.3s -72s linear infinite
}
@keyframes fall-4 {
36.322% {
transform: translate(51.2588vw,36.322vh) scale(.1189) rotate(180deg)
}
to {
transform: translate(51.7183vw,100vh) scale(.1189) rotate(360deg)
}
}
.snowflake:nth-child(5) {
opacity: .18088;
transform: translate(55.6692vw,-10px) scale(.2871);
animation: fall-5 48.3s -27s linear infinite
}
@keyframes fall-5 {
62.469% {
transform: translate(59.5877vw,62.469vh) scale(.2871) rotate(180deg)
}
to {
transform: translate(57.62845vw,100vh) scale(.2871) rotate(360deg)
}
}
.snowflake:nth-child(6) {
opacity: .64888;
transform: translate(12.1545vw,-10px) scale(.5472);
animation: fall-6 100.3s -17s linear infinite
}
@keyframes fall-6 {
72.458% {
transform: translate(9.0391vw,72.458vh) scale(.5472) rotate(180deg)
}
to {
transform: translate(10.5968vw,100vh) scale(.5472) rotate(360deg)
}
}
.snowflake:nth-child(7) {
opacity: .69952;
transform: translate(58.0249vw,-10px) scale(.1731);
animation: fall-7 88.3s -10s linear infinite
}
@keyframes fall-7 {
68.958% {
transform: translate(49.3633vw,68.958vh) scale(.1731) rotate(180deg)
}
to {
transform: translate(53.6941vw,100vh) scale(.1731) rotate(360deg)
}
}
.snowflake:nth-child(8) {
opacity: .68856;
transform: translate(97.1757vw,-10px) scale(.6894);
animation: fall-8 70.3s -11s linear infinite
}
@keyframes fall-8 {
57.907% {
transform: translate(92.1337vw,57.907vh) scale(.6894) rotate(180deg)
}
to {
transform: translate(94.6547vw,100vh) scale(.6894) rotate(360deg)
}
}
.snowflake:nth-child(9) {
opacity: .55128;
transform: translate(53.9487vw,-10px) scale(.5501);
animation: fall-9 53.3s -83s linear infinite
}
@keyframes fall-9 {
64.423% {
transform: translate(59.9679vw,64.423vh) scale(.5501) rotate(180deg)
}
to {
transform: translate(56.9583vw,100vh) scale(.5501) rotate(360deg)
}
}
.snowflake:nth-child(10) {
opacity: .16776;
transform: translate(67.3685vw,-10px) scale(.2814);
animation: fall-10 91.3s -38s linear infinite
}
@keyframes fall-10 {
40.097% {
transform: translate(60.1077vw,40.097vh) scale(.2814) rotate(180deg)
}
to {
transform: translate(63.7381vw,100vh) scale(.2814) rotate(360deg)
}
}
.snowflake:nth-child(11) {
opacity: .79208;
transform: translate(37.6218vw,-10px) scale(.6158);
animation: fall-11 36.3s -22s linear infinite
}
@keyframes fall-11 {
32.216% {
transform: translate(39.8382vw,32.216vh) scale(.6158) rotate(180deg)
}
to {
transform: translate(38.73vw,100vh) scale(.6158) rotate(360deg)
}
}
.snowflake:nth-child(12) {
opacity: .1732;
transform: translate(73.2467vw,-10px) scale(.9438);
animation: fall-12 74.3s -78s linear infinite
}
@keyframes fall-12 {
34.506% {
transform: translate(65.2719vw,34.506vh) scale(.9438) rotate(180deg)
}
to {
transform: translate(69.2593vw,100vh) scale(.9438) rotate(360deg)
}
}
.snowflake:nth-child(13) {
opacity: .10616;
transform: translate(53.7697vw,-10px) scale(.6102);
animation: fall-13 50.3s -17s linear infinite
}
@keyframes fall-13 {
76.147% {
transform: translate(62.266vw,76.147vh) scale(.6102) rotate(180deg)
}
to {
transform: translate(58.01785vw,100vh) scale(.6102) rotate(360deg)
}
}
.snowflake:nth-child(14) {
opacity: .00504;
transform: translate(90.3548vw,-10px) scale(.2804);
animation: fall-14 79.3s -48s linear infinite
}
@keyframes fall-14 {
54.321% {
transform: translate(85.0047vw,54.321vh) scale(.2804) rotate(180deg)
}
to {
transform: translate(87.67975vw,100vh) scale(.2804) rotate(360deg)
}
}
.snowflake:nth-child(15) {
opacity: .6656;
transform: translate(83.7906vw,-10px) scale(.5451);
animation: fall-15 100.3s -30s linear infinite
}
@keyframes fall-15 {
70.432% {
transform: translate(74.4192vw,70.432vh) scale(.5451) rotate(180deg)
}
to {
transform: translate(79.1049vw,100vh) scale(.5451) rotate(360deg)
}
}
.snowflake:nth-child(16) {
opacity: .70112;
transform: translate(40.4015vw,-10px) scale(.1066);
animation: fall-16 43.3s -77s linear infinite
}
@keyframes fall-16 {
45.227% {
transform: translate(41.2893vw,45.227vh) scale(.1066) rotate(180deg)
}
to {
transform: translate(40.8454vw,100vh) scale(.1066) rotate(360deg)
}
}
.snowflake:nth-child(17) {
opacity: .48376;
transform: translate(70.261vw,-10px) scale(.6448);
animation: fall-17 36.3s -44s linear infinite
}
@keyframes fall-17 {
41.332% {
transform: translate(71.0883vw,41.332vh) scale(.6448) rotate(180deg)
}
to {
transform: translate(70.67465vw,100vh) scale(.6448) rotate(360deg)
}
}
.snowflake:nth-child(18) {
opacity: .17232;
transform: translate(63.0334vw,-10px) scale(.3135);
animation: fall-18 48.3s -3s linear infinite
}
@keyframes fall-18 {
52.154% {
transform: translate(57.5532vw,52.154vh) scale(.3135) rotate(180deg)
}
to {
transform: translate(60.2933vw,100vh) scale(.3135) rotate(360deg)
}
}
.snowflake:nth-child(19) {
opacity: .16808;
transform: translate(35.5498vw,-10px) scale(.4925);
animation: fall-19 67.3s -54s linear infinite
}
@keyframes fall-19 {
72.491% {
transform: translate(42.5374vw,72.491vh) scale(.4925) rotate(180deg)
}
to {
transform: translate(39.0436vw,100vh) scale(.4925) rotate(360deg)
}
}
.snowflake:nth-child(20) {
opacity: .72592;
transform: translate(4.156vw,-10px) scale(.4811);
animation: fall-20 81.3s -26s linear infinite
}
@keyframes fall-20 {
39.4% {
transform: translate(1.3914vw,39.4vh) scale(.4811) rotate(180deg)
}
to {
transform: translate(2.7737vw,100vh) scale(.4811) rotate(360deg)
}
}
.snowflake:nth-child(21) {
opacity: .21992;
transform: translate(48.6184vw,-10px) scale(.0317);
animation: fall-21 38.3s -13s linear infinite
}
@keyframes fall-21 {
78.483% {
transform: translate(49.2208vw,78.483vh) scale(.0317) rotate(180deg)
}
to {
transform: translate(48.9196vw,100vh) scale(.0317) rotate(360deg)
}
}
.snowflake:nth-child(22) {
opacity: .58432;
transform: translate(88.8894vw,-10px) scale(.3203);
animation: fall-22 34.3s -4s linear infinite
}
@keyframes fall-22 {
57.918% {
transform: translate(90.6182vw,57.918vh) scale(.3203) rotate(180deg)
}
to {
transform: translate(89.7538vw,100vh) scale(.3203) rotate(360deg)
}
}
.snowflake:nth-child(23) {
opacity: .1564;
transform: translate(37.6428vw,-10px) scale(.3341);
animation: fall-23 93.3s -42s linear infinite
}
@keyframes fall-23 {
33.623% {
transform: translate(31.5687vw,33.623vh) scale(.3341) rotate(180deg)
}
to {
transform: translate(34.60575vw,100vh) scale(.3341) rotate(360deg)
}
}
.snowflake:nth-child(24) {
opacity: .6444;
transform: translate(63.5135vw,-10px) scale(.5268);
animation: fall-24 49.3s -99s linear infinite
}
@keyframes fall-24 {
66.006% {
transform: translate(59.1794vw,66.006vh) scale(.5268) rotate(180deg)
}
to {
transform: translate(61.34645vw,100vh) scale(.5268) rotate(360deg)
}
}
.snowflake:nth-child(25) {
opacity: .62288;
transform: translate(91.9345vw,-10px) scale(.5019);
animation: fall-25 42.3s -19s linear infinite
}
@keyframes fall-25 {
78.572% {
transform: translate(93.6463vw,78.572vh) scale(.5019) rotate(180deg)
}
to {
transform: translate(92.7904vw,100vh) scale(.5019) rotate(360deg)
}
}
.snowflake:nth-child(26) {
opacity: .04824;
transform: translate(88.7518vw,-10px) scale(.1163);
animation: fall-26 76.3s -29s linear infinite
}
@keyframes fall-26 {
48.711% {
transform: translate(82.7619vw,48.711vh) scale(.1163) rotate(180deg)
}
to {
transform: translate(85.75685vw,100vh) scale(.1163) rotate(360deg)
}
}
.snowflake:nth-child(27) {
opacity: .73824;
transform: translate(87.5936vw,-10px) scale(.618);
animation: fall-27 72.3s -34s linear infinite
}
@keyframes fall-27 {
41.804% {
transform: translate(82.7788vw,41.804vh) scale(.618) rotate(180deg)
}
to {
transform: translate(85.1862vw,100vh) scale(.618) rotate(360deg)
}
}
.snowflake:nth-child(28) {
opacity: .26352;
transform: translate(33.3472vw,-10px) scale(.0749);
animation: fall-28 45.3s -79s linear infinite
}
@keyframes fall-28 {
38.288% {
transform: translate(32.454vw,38.288vh) scale(.0749) rotate(180deg)
}
to {
transform: translate(32.9006vw,100vh) scale(.0749) rotate(360deg)
}
}
.snowflake:nth-child(29) {
opacity: .44888;
transform: translate(82.2552vw,-10px) scale(.6489);
animation: fall-29 84.3s -10s linear infinite
}
@keyframes fall-29 {
68.46% {
transform: translate(82.8464vw,68.46vh) scale(.6489) rotate(180deg)
}
to {
transform: translate(82.5508vw,100vh) scale(.6489) rotate(360deg)
}
}
.snowflake:nth-child(30) {
opacity: .62016;
transform: translate(58.1385vw,-10px) scale(.7805);
animation: fall-30 92.3s -78s linear infinite
}
@keyframes fall-30 {
34.461% {
transform: translate(49.0688vw,34.461vh) scale(.7805) rotate(180deg)
}
to {
transform: translate(53.60365vw,100vh) scale(.7805) rotate(360deg)
}
}
.snowflake:nth-child(31) {
opacity: .65368;
transform: translate(43.2767vw,-10px) scale(.0012);
animation: fall-31 99.3s -48s linear infinite
}
@keyframes fall-31 {
46.611% {
transform: translate(33.8686vw,46.611vh) scale(.0012) rotate(180deg)
}
to {
transform: translate(38.57265vw,100vh) scale(.0012) rotate(360deg)
}
}
.snowflake:nth-child(32) {
opacity: .49472;
transform: translate(48.3171vw,-10px) scale(.2158);
animation: fall-32 84.3s -8s linear infinite
}
@keyframes fall-32 {
75.257% {
transform: translate(46.0443vw,75.257vh) scale(.2158) rotate(180deg)
}
to {
transform: translate(47.1807vw,100vh) scale(.2158) rotate(360deg)
}
}
.snowflake:nth-child(33) {
opacity: .66056;
transform: translate(76.2174vw,-10px) scale(.9554);
animation: fall-33 38.3s -18s linear infinite
}
@keyframes fall-33 {
39.203% {
transform: translate(83.2072vw,39.203vh) scale(.9554) rotate(180deg)
}
to {
transform: translate(79.7123vw,100vh) scale(.9554) rotate(360deg)
}
}
.snowflake:nth-child(34) {
opacity: .27944;
transform: translate(35.0847vw,-10px) scale(.8159);
animation: fall-34 81.3s -64s linear infinite
}
@keyframes fall-34 {
36.426% {
transform: translate(44.7803vw,36.426vh) scale(.8159) rotate(180deg)
}
to {
transform: translate(39.9325vw,100vh) scale(.8159) rotate(360deg)
}
}
.snowflake:nth-child(35) {
opacity: .4664;
transform: translate(32.1076vw,-10px) scale(.9617);
animation: fall-35 56.3s -84s linear infinite
}
@keyframes fall-35 {
66.663% {
transform: translate(33.7281vw,66.663vh) scale(.9617) rotate(180deg)
}
to {
transform: translate(32.91785vw,100vh) scale(.9617) rotate(360deg)
}
}
.snowflake:nth-child(36) {
opacity: .7776;
transform: translate(69.0025vw,-10px) scale(.1444);
animation: fall-36 77.3s -78s linear infinite
}
@keyframes fall-36 {
30.168% {
transform: translate(74.3135vw,30.168vh) scale(.1444) rotate(180deg)
}
to {
transform: translate(71.658vw,100vh) scale(.1444) rotate(360deg)
}
}
.snowflake:nth-child(37) {
opacity: .63536;
transform: translate(10.8048vw,-10px) scale(.5849);
animation: fall-37 75.3s -71s linear infinite
}
@keyframes fall-37 {
42.436% {
transform: translate(2.7315vw,42.436vh) scale(.5849) rotate(180deg)
}
to {
transform: translate(6.76815vw,100vh) scale(.5849) rotate(360deg)
}
}
.snowflake:nth-child(38) {
opacity: .4996;
transform: translate(.0279vw,-10px) scale(.273);
animation: fall-38 40.3s -65s linear infinite
}
@keyframes fall-38 {
76.07% {
transform: translate(-.6083vw,76.07vh) scale(.273) rotate(180deg)
}
to {
transform: translate(-.2902vw,100vh) scale(.273) rotate(360deg)
}
}
.snowflake:nth-child(39) {
opacity: .34024;
transform: translate(41.2271vw,-10px) scale(.6257);
animation: fall-39 98.3s -28s linear infinite
}
@keyframes fall-39 {
75.611% {
transform: translate(36.4889vw,75.611vh) scale(.6257) rotate(180deg)
}
to {
transform: translate(38.858vw,100vh) scale(.6257) rotate(360deg)
}
}
.snowflake:nth-child(40) {
opacity: .04512;
transform: translate(83.8138vw,-10px) scale(.5736);
animation: fall-40 82.3s -71s linear infinite
}
@keyframes fall-40 {
37.343% {
transform: translate(89.6628vw,37.343vh) scale(.5736) rotate(180deg)
}
to {
transform: translate(86.7383vw,100vh) scale(.5736) rotate(360deg)
}
}
.snowflake:nth-child(41) {
opacity: .21944;
transform: translate(14.283vw,-10px) scale(.4543);
animation: fall-41 48.3s -51s linear infinite
}
@keyframes fall-41 {
47.373% {
transform: translate(7.404vw,47.373vh) scale(.4543) rotate(180deg)
}
to {
transform: translate(10.8435vw,100vh) scale(.4543) rotate(360deg)
}
}
.snowflake:nth-child(42) {
opacity: .39144;
transform: translate(71.6197vw,-10px) scale(.9531);
animation: fall-42 92.3s -3s linear infinite
}
@keyframes fall-42 {
68.565% {
transform: translate(71.1186vw,68.565vh) scale(.9531) rotate(180deg)
}
to {
transform: translate(71.36915vw,100vh) scale(.9531) rotate(360deg)
}
}
.snowflake:nth-child(43) {
opacity: .45768;
transform: translate(44.8674vw,-10px) scale(.6613);
animation: fall-43 74.3s -8s linear infinite
}
@keyframes fall-43 {
42.807% {
transform: translate(38.4346vw,42.807vh) scale(.6613) rotate(180deg)
}
to {
transform: translate(41.651vw,100vh) scale(.6613) rotate(360deg)
}
}
.snowflake:nth-child(44) {
opacity: .0796;
transform: translate(42.7488vw,-10px) scale(.2136);
animation: fall-44 62.3s -30s linear infinite
}
@keyframes fall-44 {
78.947% {
transform: translate(47.389vw,78.947vh) scale(.2136) rotate(180deg)
}
to {
transform: translate(45.0689vw,100vh) scale(.2136) rotate(360deg)
}
}
.snowflake:nth-child(45) {
opacity: .65072;
transform: translate(6.4828vw,-10px) scale(.2414);
animation: fall-45 75.3s -40s linear infinite
}
@keyframes fall-45 {
77.426% {
transform: translate(-1.0254vw,77.426vh) scale(.2414) rotate(180deg)
}
to {
transform: translate(2.7287vw,100vh) scale(.2414) rotate(360deg)
}
}
.snowflake:nth-child(46) {
opacity: .6184;
transform: translate(78.4202vw,-10px) scale(.9425);
animation: fall-46 94.3s -42s linear infinite
}
@keyframes fall-46 {
79.898% {
transform: translate(82.6523vw,79.898vh) scale(.9425) rotate(180deg)
}
to {
transform: translate(80.53625vw,100vh) scale(.9425) rotate(360deg)
}
}
.snowflake:nth-child(47) {
opacity: .5832;
transform: translate(57.5083vw,-10px) scale(.2223);
animation: fall-47 71.3s -71s linear infinite
}
@keyframes fall-47 {
40.938% {
transform: translate(50.4979vw,40.938vh) scale(.2223) rotate(180deg)
}
to {
transform: translate(54.0031vw,100vh) scale(.2223) rotate(360deg)
}
}
.snowflake:nth-child(48) {
opacity: .19136;
transform: translate(17.7185vw,-10px) scale(.0633);
animation: fall-48 47.3s -53s linear infinite
}
@keyframes fall-48 {
40.063% {
transform: translate(16.1989vw,40.063vh) scale(.0633) rotate(180deg)
}
to {
transform: translate(16.9587vw,100vh) scale(.0633) rotate(360deg)
}
}
.snowflake:nth-child(49) {
opacity: .2184;
transform: translate(25.5788vw,-10px) scale(.9747);
animation: fall-49 73.3s -41s linear infinite
}
@keyframes fall-49 {
34.095% {
transform: translate(30.7864vw,34.095vh) scale(.9747) rotate(180deg)
}
to {
transform: translate(28.1826vw,100vh) scale(.9747) rotate(360deg)
}
}
.snowflake:nth-child(50) {
opacity: .01352;
transform: translate(36.0815vw,-10px) scale(.744);
animation: fall-50 79.3s -34s linear infinite
}
@keyframes fall-50 {
41.913% {
transform: translate(26.436vw,41.913vh) scale(.744) rotate(180deg)
}
to {
transform: translate(31.25875vw,100vh) scale(.744) rotate(360deg)
}
}
.snowflake:nth-child(51) {
opacity: .5176;
transform: translate(69.1115vw,-10px) scale(.0744);
animation: fall-51 58.3s -1s linear infinite
}
@keyframes fall-51 {
68.507% {
transform: translate(65.6021vw,68.507vh) scale(.0744) rotate(180deg)
}
to {
transform: translate(67.3568vw,100vh) scale(.0744) rotate(360deg)
}
}
.snowflake:nth-child(52) {
opacity: .46496;
transform: translate(65.1937vw,-10px) scale(.7467);
animation: fall-52 87.3s -60s linear infinite
}
@keyframes fall-52 {
76.556% {
transform: translate(63.4876vw,76.556vh) scale(.7467) rotate(180deg)
}
to {
transform: translate(64.34065vw,100vh) scale(.7467) rotate(360deg)
}
}
.snowflake:nth-child(53) {
opacity: .68016;
transform: translate(45.3555vw,-10px) scale(.0214);
animation: fall-53 81.3s -34s linear infinite
}
@keyframes fall-53 {
41.007% {
transform: translate(48.8222vw,41.007vh) scale(.0214) rotate(180deg)
}
to {
transform: translate(47.08885vw,100vh) scale(.0214) rotate(360deg)
}
}
.snowflake:nth-child(54) {
opacity: .24664;
transform: translate(68.0439vw,-10px) scale(.961);
animation: fall-54 63.3s -61s linear infinite
}
@keyframes fall-54 {
68.091% {
transform: translate(68.278vw,68.091vh) scale(.961) rotate(180deg)
}
to {
transform: translate(68.16095vw,100vh) scale(.961) rotate(360deg)
}
}
.snowflake:nth-child(55) {
opacity: .39024;
transform: translate(10.1695vw,-10px) scale(.1325);
animation: fall-55 89.3s -84s linear infinite
}
@keyframes fall-55 {
77.53% {
transform: translate(7.6975vw,77.53vh) scale(.1325) rotate(180deg)
}
to {
transform: translate(8.9335vw,100vh) scale(.1325) rotate(360deg)
}
}
.snowflake:nth-child(56) {
opacity: .59384;
transform: translate(95.9338vw,-10px) scale(.2159);
animation: fall-56 46.3s -69s linear infinite
}
@keyframes fall-56 {
41.955% {
transform: translate(97.0518vw,41.955vh) scale(.2159) rotate(180deg)
}
to {
transform: translate(96.4928vw,100vh) scale(.2159) rotate(360deg)
}
}
.snowflake:nth-child(57) {
opacity: .21976;
transform: translate(77.54vw,-10px) scale(.4261);
animation: fall-57 52.3s -99s linear infinite
}
@keyframes fall-57 {
70.559% {
transform: translate(83.2612vw,70.559vh) scale(.4261) rotate(180deg)
}
to {
transform: translate(80.4006vw,100vh) scale(.4261) rotate(360deg)
}
}
.snowflake:nth-child(58) {
opacity: .35128;
transform: translate(77.9826vw,-10px) scale(.9334);
animation: fall-58 40.3s -57s linear infinite
}
@keyframes fall-58 {
77.134% {
transform: translate(84.3471vw,77.134vh) scale(.9334) rotate(180deg)
}
to {
transform: translate(81.16485vw,100vh) scale(.9334) rotate(360deg)
}
}
.snowflake:nth-child(59) {
opacity: .16624;
transform: translate(34.2713vw,-10px) scale(.552);
animation: fall-59 90.3s -20s linear infinite
}
@keyframes fall-59 {
33.554% {
transform: translate(36.3693vw,33.554vh) scale(.552) rotate(180deg)
}
to {
transform: translate(35.3203vw,100vh) scale(.552) rotate(360deg)
}
}
.snowflake:nth-child(60) {
opacity: .30864;
transform: translate(4.0959vw,-10px) scale(.6613);
animation: fall-60 92.3s -62s linear infinite
}
@keyframes fall-60 {
48.995% {
transform: translate(2.073vw,48.995vh) scale(.6613) rotate(180deg)
}
to {
transform: translate(3.08445vw,100vh) scale(.6613) rotate(360deg)
}
}
.snowflake:nth-child(61) {
opacity: .0908;
transform: translate(7.2935vw,-10px) scale(.8028);
animation: fall-61 49.3s -72s linear infinite
}
@keyframes fall-61 {
44.627% {
transform: translate(8.8594vw,44.627vh) scale(.8028) rotate(180deg)
}
to {
transform: translate(8.07645vw,100vh) scale(.8028) rotate(360deg)
}
}
.snowflake:nth-child(62) {
opacity: .56344;
transform: translate(99.3551vw,-10px) scale(.1692);
animation: fall-62 98.3s -51s linear infinite
}
@keyframes fall-62 {
71.228% {
transform: translate(101.4279vw,71.228vh) scale(.1692) rotate(180deg)
}
to {
transform: translate(100.3915vw,100vh) scale(.1692) rotate(360deg)
}
}
.snowflake:nth-child(63) {
opacity: .26024;
transform: translate(81.2687vw,-10px) scale(.2705);
animation: fall-63 58.3s -90s linear infinite
}
@keyframes fall-63 {
30.312% {
transform: translate(90.1999vw,30.312vh) scale(.2705) rotate(180deg)
}
to {
transform: translate(85.7343vw,100vh) scale(.2705) rotate(360deg)
}
}
.snowflake:nth-child(64) {
opacity: .54368;
transform: translate(11.7707vw,-10px) scale(.9331);
animation: fall-64 48.3s -2s linear infinite
}
@keyframes fall-64 {
71.021% {
transform: translate(8.953vw,71.021vh) scale(.9331) rotate(180deg)
}
to {
transform: translate(10.36185vw,100vh) scale(.9331) rotate(360deg)
}
}
.snowflake:nth-child(65) {
opacity: .3024;
transform: translate(57.7928vw,-10px) scale(.6079);
animation: fall-65 84.3s -50s linear infinite
}
@keyframes fall-65 {
47.26% {
transform: translate(48.5949vw,47.26vh) scale(.6079) rotate(180deg)
}
to {
transform: translate(53.19385vw,100vh) scale(.6079) rotate(360deg)
}
}
.snowflake:nth-child(66) {
opacity: .78872;
transform: translate(61.3354vw,-10px) scale(.5655);
animation: fall-66 53.3s -33s linear infinite
}
@keyframes fall-66 {
73.653% {
transform: translate(61.3284vw,73.653vh) scale(.5655) rotate(180deg)
}
to {
transform: translate(61.3319vw,100vh) scale(.5655) rotate(360deg)
}
}
.snowflake:nth-child(67) {
opacity: .55072;
transform: translate(7.585vw,-10px) scale(.6758);
animation: fall-67 59.3s -27s linear infinite
}
@keyframes fall-67 {
36.216% {
transform: translate(3.2215vw,36.216vh) scale(.6758) rotate(180deg)
}
to {
transform: translate(5.40325vw,100vh) scale(.6758) rotate(360deg)
}
}
.snowflake:nth-child(68) {
opacity: .1332;
transform: translate(79.6325vw,-10px) scale(.5871);
animation: fall-68 80.3s -44s linear infinite
}
@keyframes fall-68 {
70.903% {
transform: translate(84.7444vw,70.903vh) scale(.5871) rotate(180deg)
}
to {
transform: translate(82.18845vw,100vh) scale(.5871) rotate(360deg)
}
}
.snowflake:nth-child(69) {
opacity: .31784;
transform: translate(26.4017vw,-10px) scale(.2341);
animation: fall-69 50.3s -27s linear infinite
}
@keyframes fall-69 {
48.493% {
transform: translate(33.6534vw,48.493vh) scale(.2341) rotate(180deg)
}
to {
transform: translate(30.02755vw,100vh) scale(.2341) rotate(360deg)
}
}
.snowflake:nth-child(70) {
opacity: .57688;
transform: translate(82.6854vw,-10px) scale(.175);
animation: fall-70 94.3s -30s linear infinite
}
@keyframes fall-70 {
76.807% {
transform: translate(73.9509vw,76.807vh) scale(.175) rotate(180deg)
}
to {
transform: translate(78.31815vw,100vh) scale(.175) rotate(360deg)
}
}
.snowflake:nth-child(71) {
opacity: .76272;
transform: translate(91.4755vw,-10px) scale(.2294);
animation: fall-71 70.3s -32s linear infinite
}
@keyframes fall-71 {
56.738% {
transform: translate(95.4735vw,56.738vh) scale(.2294) rotate(180deg)
}
to {
transform: translate(93.4745vw,100vh) scale(.2294) rotate(360deg)
}
}
.snowflake:nth-child(72) {
opacity: .46992;
transform: translate(4.4258vw,-10px) scale(.4327);
animation: fall-72 35.3s -93s linear infinite
}
@keyframes fall-72 {
67.971% {
transform: translate(-2.172vw,67.971vh) scale(.4327) rotate(180deg)
}
to {
transform: translate(1.1269vw,100vh) scale(.4327) rotate(360deg)
}
}
.snowflake:nth-child(73) {
opacity: .658;
transform: translate(41.69vw,-10px) scale(.4765);
animation: fall-73 55.3s -26s linear infinite
}
@keyframes fall-73 {
64.472% {
transform: translate(31.9928vw,64.472vh) scale(.4765) rotate(180deg)
}
to {
transform: translate(36.8414vw,100vh) scale(.4765) rotate(360deg)
}
}
.snowflake:nth-child(74) {
opacity: .19552;
transform: translate(74.1889vw,-10px) scale(.042);
animation: fall-74 61.3s -88s linear infinite
}
@keyframes fall-74 {
75.487% {
transform: translate(72.86vw,75.487vh) scale(.042) rotate(180deg)
}
to {
transform: translate(73.52445vw,100vh) scale(.042) rotate(360deg)
}
}
.snowflake:nth-child(75) {
opacity: .63912;
transform: translate(21.7641vw,-10px) scale(.6023);
animation: fall-75 93.3s -6s linear infinite
}
@keyframes fall-75 {
51.302% {
transform: translate(30.9741vw,51.302vh) scale(.6023) rotate(180deg)
}
to {
transform: translate(26.3691vw,100vh) scale(.6023) rotate(360deg)
}
}
.snowflake:nth-child(76) {
opacity: .77352;
transform: translate(80.5502vw,-10px) scale(.6056);
animation: fall-76 99.3s -25s linear infinite
}
@keyframes fall-76 {
65.63% {
transform: translate(73.7696vw,65.63vh) scale(.6056) rotate(180deg)
}
to {
transform: translate(77.1599vw,100vh) scale(.6056) rotate(360deg)
}
}
.snowflake:nth-child(77) {
opacity: .4012;
transform: translate(50.0699vw,-10px) scale(.4796);
animation: fall-77 60.3s -9s linear infinite
}
@keyframes fall-77 {
77.875% {
transform: translate(47.4114vw,77.875vh) scale(.4796) rotate(180deg)
}
to {
transform: translate(48.74065vw,100vh) scale(.4796) rotate(360deg)
}
}
.snowflake:nth-child(78) {
opacity: .54904;
transform: translate(1.8911vw,-10px) scale(.9209);
animation: fall-78 68.3s -26s linear infinite
}
@keyframes fall-78 {
77.376% {
transform: translate(-.1772vw,77.376vh) scale(.9209) rotate(180deg)
}
to {
transform: translate(.85695vw,100vh) scale(.9209) rotate(360deg)
}
}
.snowflake:nth-child(79) {
opacity: .76936;
transform: translate(56.7569vw,-10px) scale(.9577);
animation: fall-79 68.3s -28s linear infinite
}
@keyframes fall-79 {
47.274% {
transform: translate(57.8303vw,47.274vh) scale(.9577) rotate(180deg)
}
to {
transform: translate(57.2936vw,100vh) scale(.9577) rotate(360deg)
}
}
.snowflake:nth-child(80) {
opacity: .05888;
transform: translate(8.1242vw,-10px) scale(.2014);
animation: fall-80 90.3s -60s linear infinite
}
@keyframes fall-80 {
68.232% {
transform: translate(12.8521vw,68.232vh) scale(.2014) rotate(180deg)
}
to {
transform: translate(10.48815vw,100vh) scale(.2014) rotate(360deg)
}
}
.snowflake:nth-child(81) {
opacity: .10136;
transform: translate(23.6384vw,-10px) scale(.8181);
animation: fall-81 62.3s -100s linear infinite
}
@keyframes fall-81 {
75.205% {
transform: translate(13.7119vw,75.205vh) scale(.8181) rotate(180deg)
}
to {
transform: translate(18.67515vw,100vh) scale(.8181) rotate(360deg)
}
}
.snowflake:nth-child(82) {
opacity: .40688;
transform: translate(71.9974vw,-10px) scale(.0035);
animation: fall-82 77.3s -30s linear infinite
}
@keyframes fall-82 {
44.941% {
transform: translate(77.2516vw,44.941vh) scale(.0035) rotate(180deg)
}
to {
transform: translate(74.6245vw,100vh) scale(.0035) rotate(360deg)
}
}
.snowflake:nth-child(83) {
opacity: .70464;
transform: translate(65.7068vw,-10px) scale(.4717);
animation: fall-83 60.3s -24s linear infinite
}
@keyframes fall-83 {
57.116% {
transform: translate(74.7471vw,57.116vh) scale(.4717) rotate(180deg)
}
to {
transform: translate(70.22695vw,100vh) scale(.4717) rotate(360deg)
}
}
.snowflake:nth-child(84) {
opacity: .09064;
transform: translate(95.9307vw,-10px) scale(.9636);
animation: fall-84 56.3s -83s linear infinite
}
@keyframes fall-84 {
36.031% {
transform: translate(89.5789vw,36.031vh) scale(.9636) rotate(180deg)
}
to {
transform: translate(92.7548vw,100vh) scale(.9636) rotate(360deg)
}
}
.snowflake:nth-child(85) {
opacity: .52616;
transform: translate(79.603vw,-10px) scale(.6306);
animation: fall-85 69.3s -66s linear infinite
}
@keyframes fall-85 {
64.36% {
transform: translate(89.2514vw,64.36vh) scale(.6306) rotate(180deg)
}
to {
transform: translate(84.4272vw,100vh) scale(.6306) rotate(360deg)
}
}
.snowflake:nth-child(86) {
opacity: .63248;
transform: translate(66.7812vw,-10px) scale(.511);
animation: fall-86 94.3s -52s linear infinite
}
@keyframes fall-86 {
77.64% {
transform: translate(71.8734vw,77.64vh) scale(.511) rotate(180deg)
}
to {
transform: translate(69.3273vw,100vh) scale(.511) rotate(360deg)
}
}
.snowflake:nth-child(87) {
opacity: .66984;
transform: translate(1.8355vw,-10px) scale(.2163);
animation: fall-87 49.3s -73s linear infinite
}
@keyframes fall-87 {
53.956% {
transform: translate(9.6034vw,53.956vh) scale(.2163) rotate(180deg)
}
to {
transform: translate(5.71945vw,100vh) scale(.2163) rotate(360deg)
}
}
.snowflake:nth-child(88) {
opacity: .166;
transform: translate(13.7172vw,-10px) scale(.3423);
animation: fall-88 70.3s -25s linear infinite
}
@keyframes fall-88 {
66.605% {
transform: translate(17.3613vw,66.605vh) scale(.3423) rotate(180deg)
}
to {
transform: translate(15.53925vw,100vh) scale(.3423) rotate(360deg)
}
}
.snowflake:nth-child(89) {
opacity: .30232;
transform: translate(71.9606vw,-10px) scale(.0673);
animation: fall-89 58.3s -56s linear infinite
}
@keyframes fall-89 {
34.016% {
transform: translate(66.4783vw,34.016vh) scale(.0673) rotate(180deg)
}
to {
transform: translate(69.21945vw,100vh) scale(.0673) rotate(360deg)
}
}
.snowflake:nth-child(90) {
opacity: .56448;
transform: translate(36.0308vw,-10px) scale(.4602);
animation: fall-90 52.3s -51s linear infinite
}
@keyframes fall-90 {
65.974% {
transform: translate(26.2831vw,65.974vh) scale(.4602) rotate(180deg)
}
to {
transform: translate(31.15695vw,100vh) scale(.4602) rotate(360deg)
}
}
.snowflake:nth-child(91) {
opacity: .01248;
transform: translate(25.2244vw,-10px) scale(.1288);
animation: fall-91 49.3s -40s linear infinite
}
@keyframes fall-91 {
33.801% {
transform: translate(29.1968vw,33.801vh) scale(.1288) rotate(180deg)
}
to {
transform: translate(27.2106vw,100vh) scale(.1288) rotate(360deg)
}
}
.snowflake:nth-child(92) {
opacity: .72104;
transform: translate(4.4404vw,-10px) scale(.7381);
animation: fall-92 39.3s -70s linear infinite
}
@keyframes fall-92 {
30.431% {
transform: translate(-1.6172vw,30.431vh) scale(.7381) rotate(180deg)
}
to {
transform: translate(1.4116vw,100vh) scale(.7381) rotate(360deg)
}
}
.snowflake:nth-child(93) {
opacity: .5044;
transform: translate(37.1625vw,-10px) scale(.8553);
animation: fall-93 60.3s -41s linear infinite
}
@keyframes fall-93 {
36.313% {
transform: translate(39.1987vw,36.313vh) scale(.8553) rotate(180deg)
}
to {
transform: translate(38.1806vw,100vh) scale(.8553) rotate(360deg)
}
}
.snowflake:nth-child(94) {
opacity: .33824;
transform: translate(57.809vw,-10px) scale(.2739);
animation: fall-94 49.3s -33s linear infinite
}
@keyframes fall-94 {
58.394% {
transform: translate(61.9814vw,58.394vh) scale(.2739) rotate(180deg)
}
to {
transform: translate(59.8952vw,100vh) scale(.2739) rotate(360deg)
}
}
.snowflake:nth-child(95) {
opacity: .58464;
transform: translate(73.9809vw,-10px) scale(.6244);
animation: fall-95 61.3s -60s linear infinite
}
@keyframes fall-95 {
44.775% {
transform: translate(83.7393vw,44.775vh) scale(.6244) rotate(180deg)
}
to {
transform: translate(78.8601vw,100vh) scale(.6244) rotate(360deg)
}
}
.snowflake:nth-child(96) {
opacity: .08984;
transform: translate(61.2892vw,-10px) scale(.9702);
animation: fall-96 65.3s -87s linear infinite
}
@keyframes fall-96 {
50.538% {
transform: translate(58.9022vw,50.538vh) scale(.9702) rotate(180deg)
}
to {
transform: translate(60.0957vw,100vh) scale(.9702) rotate(360deg)
}
}
.snowflake:nth-child(97) {
opacity: .07136;
transform: translate(4.7974vw,-10px) scale(.2585);
animation: fall-97 80.3s -26s linear infinite
}
@keyframes fall-97 {
69.945% {
transform: translate(12.4214vw,69.945vh) scale(.2585) rotate(180deg)
}
to {
transform: translate(8.6094vw,100vh) scale(.2585) rotate(360deg)
}
}
.snowflake:nth-child(98) {
opacity: .0596;
transform: translate(50.3929vw,-10px) scale(.4232);
animation: fall-98 37.3s -31s linear infinite
}
@keyframes fall-98 {
71.946% {
transform: translate(59.9668vw,71.946vh) scale(.4232) rotate(180deg)
}
to {
transform: translate(55.17985vw,100vh) scale(.4232) rotate(360deg)
}
}
.snowflake:nth-child(99) {
opacity: .17472;
transform: translate(90.4576vw,-10px) scale(.0402);
animation: fall-99 60.3s -80s linear infinite
}
@keyframes fall-99 {
66.968% {
transform: translate(87.3933vw,66.968vh) scale(.0402) rotate(180deg)
}
to {
transform: translate(88.92545vw,100vh) scale(.0402) rotate(360deg)
}
}
.snowflake:nth-child(100) {
opacity: .414;
transform: translate(82.2895vw,-10px) scale(.6314);
animation: fall-100 79.3s -59s linear infinite
}
@keyframes fall-100 {
77.109% {
transform: translate(75.6903vw,77.109vh) scale(.6314) rotate(180deg)
}
to {
transform: translate(78.9899vw,100vh) scale(.6314) rotate(360deg)
}
}
snowflake_container_div = document.createElement( 'div' );
snowflake_container_div.classList.add("snowflakes-container");
snowflake_div = document.createElement( 'div' );
snowflake_div.classList.add("snowflake");
for(var i = 0; i < 100; i++){
snowflake_container_div.appendChild(snowflake_div.cloneNode(true));
}
document.body.appendChild(snowflake_container_div);
@gAlleb
Copy link
Author

gAlleb commented Dec 25, 2023

A lit bit of Xmas for your Azuracast Station public page — Snoflakes are falling down. Real Snowflakes omg :)

  1. Go to Administration -> Custom Branding
292679525-7dd12065-b070-42a4-adb9-8e91fdce5179
  1. Copy and paste the above css into Custom CSS for Public Pages section

  2. Copy and paste the above js into Custom JS for Public Pages section

  3. Save

  4. Enjoy

Снимок экрана 2023-12-25 в 14 36 29

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment