Memasang kode Christmas with audio
Code ini menggunakan CSS dan HTML serta Js. Untuk menerapkan kode tersebut Langkah awal Login ke akun blog klik tombol blog baru, buat satubuah link baru kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template
ganti dengan kode blank template, yang tersedia pada sumber berikut ini Get Blank Template edit background warna sesuai keinginan dan klik simpan selesai
Code ini menggunakan CSS dan HTML serta Js. Untuk menerapkan kode tersebut Langkah awal Login ke akun blog klik tombol blog baru, buat satubuah link baru kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template
ganti dengan kode blank template, yang tersedia pada sumber berikut ini Get Blank Template edit background warna sesuai keinginan dan klik simpan selesai
Kemudian klik entri halaman baru HTML pada link tersebut
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai
<style class="Mys2010-styles">
header {
-o-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
padding: -51px 0;
position: fixed;
top: 0;
width: 100%;
background: #111;
border-bottom: 3px solid #dad;
}
/* GRADIEND */
.ap {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 60px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 14px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #333;
background: rgba(7,000,000, .7);
border-top: 2px solid #f0f;
z-index: 9999;
}
html {
background: # ;
overflow: hidden;
width: 100%;
}
#container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: -260px;
margin: 0 auto;
background-image: linear-gradient(#001 0%, #208 100%);
overflow: hidden;
}
.sky {
position: absolute;
top: 0;
opacity: .5;
z-index: 2;
overflow: hidden;
}
.flake {
z-index: 4;
overflow: hidden;
left: -100px;
}
.flake:nth-child(1) {
animation: s1 4s linear infinite;
animation-delay: 40ms;
width: 3px;
height: 3px;
position: absolute;
left: -80px;
opacity: 0.31;
overflow: hidden;
}
@keyframes s1 {
0% {
top: -100px;
left: 1425px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1438px;
transform: rotateZ(501deg);
}
}
.flake:nth-child(2) {
animation: s2 6s linear infinite;
animation-delay: 80ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.89;
overflow: hidden;
}
@keyframes s2 {
0% {
top: -100px;
left: 1294px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1367px;
transform: rotateZ(4deg);
}
}
.flake:nth-child(3) {
animation: s3 9s linear infinite;
animation-delay: 120ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.7;
overflow: hidden;
}
@keyframes s3 {
0% {
top: -100px;
left: 609px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 590px;
transform: rotateZ(459deg);
}
}
.flake:nth-child(4) {
animation: s4 5s linear infinite;
animation-delay: 160ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.55;
overflow: hidden;
}
@keyframes s4 {
0% {
top: -100px;
left: 1042px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1070px;
transform: rotateZ(189deg);
}
}
.flake:nth-child(5) {
animation: s5 3s linear infinite;
animation-delay: 200ms;
width: 3px;
height: 3px;
position: absolute;
left: -80px;
opacity: 0.16;
overflow: hidden;
}
@keyframes s5 {
0% {
top: -100px;
left: 383px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 323px;
transform: rotateZ(161deg);
}
}
.flake:nth-child(6) {
animation: s6 6s linear infinite;
animation-delay: 240ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.62;
overflow: hidden;
}
@keyframes s6 {
0% {
top: -100px;
left: 241px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 269px;
transform: rotateZ(140deg);
}
}
.flake:nth-child(7) {
animation: s7 9s linear infinite;
animation-delay: 280ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.31;
overflow: hidden;
}
@keyframes s7 {
0% {
top: -100px;
left: 848px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 827px;
transform: rotateZ(507deg);
}
}
.flake:nth-child(8) {
animation: s8 8s linear infinite;
animation-delay: 320ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.15;
overflow: hidden;
}
@keyframes s8 {
0% {
top: -100px;
left: 658px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 565px;
transform: rotateZ(778deg);
}
}
.flake:nth-child(9) {
animation: s9 8s linear infinite;
animation-delay: 360ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.96;
overflow: hidden;
}
@keyframes s9 {
0% {
top: -100px;
left: 1373px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1347px;
transform: rotateZ(68deg);
}
}
.flake:nth-child(10) {
animation: s10 8s linear infinite;
animation-delay: 400ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.86;
overflow: hidden;
}
@keyframes s10 {
0% {
top: -100px;
left: 811px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 820px;
transform: rotateZ(72deg);
}
}
.flake:nth-child(11) {
animation: s11 6s linear infinite;
animation-delay: 440ms;
width: 3px;
height: 3px;
position: absolute;
left: -80px;
opacity: 0.94;
overflow: hidden;
}
@keyframes s11 {
0% {
top: -100px;
left: 1438px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1408px;
transform: rotateZ(755deg);
}
}
.flake:nth-child(12) {
animation: s12 8s linear infinite;
animation-delay: 480ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.2;
overflow: hidden;
}
@keyframes s12 {
0% {
top: -100px;
left: 1058px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1073px;
transform: rotateZ(24deg);
}
}
.flake:nth-child(13) {
animation: s13 6s linear infinite;
animation-delay: 520ms;
width: 3px;
height: 3px;
position: absolute;
left: -80px;
opacity: 0.6;
overflow: hidden;
}
@keyframes s13 {
0% {
top: -100px;
left: 1034px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1042px;
transform: rotateZ(116deg);
}
}
.flake:nth-child(14) {
animation: s14 6s linear infinite;
animation-delay: 560ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.16;
overflow: hidden;
}
@keyframes s14 {
0% {
top: -100px;
left: 1031px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1054px;
transform: rotateZ(785deg);
}
}
.flake:nth-child(15) {
animation: s15 5s linear infinite;
animation-delay: 600ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.04;
overflow: hidden;
}
@keyframes s15 {
0% {
top: -100px;
left: 1227px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1194px;
transform: rotateZ(377deg);
}
}
.flake:nth-child(16) {
animation: s16 4s linear infinite;
animation-delay: 640ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.34;
overflow: hidden;
}
@keyframes s16 {
0% {
top: -100px;
left: 593px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 634px;
transform: rotateZ(163deg);
}
}
.flake:nth-child(17) {
animation: s17 8s linear infinite;
animation-delay: 680ms;
width: 3px;
height: 3px;
position: absolute;
left: -80px;
opacity: 0.89;
overflow: hidden;
}
@keyframes s17 {
0% {
top: -100px;
left: 1154px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1153px;
transform: rotateZ(301deg);
}
}
.flake:nth-child(18) {
animation: s18 9s linear infinite;
animation-delay: 720ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.28;
overflow: hidden;
}
@keyframes s18 {
0% {
top: -100px;
left: 625px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 630px;
transform: rotateZ(539deg);
}
}
.flake:nth-child(19) {
animation: s19 3s linear infinite;
animation-delay: 760ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.32;
overflow: hidden;
}
@keyframes s19 {
0% {
top: -100px;
left: 861px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 799px;
transform: rotateZ(606deg);
}
}
.flake:nth-child(20) {
animation: s20 7s linear infinite;
animation-delay: 800ms;
width: 3px;
height: 3px;
position: absolute;
left: -80px;
opacity: 0.83;
overflow: hidden;
}
@keyframes s20 {
0% {
top: -100px;
left: 1439px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1382px;
transform: rotateZ(704deg);
}
}
.flake:nth-child(21) {
animation: s21 5s linear infinite;
animation-delay: 840ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.22;
overflow: hidden;
}
@keyframes s21 {
0% {
top: -100px;
left: 331px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 307px;
transform: rotateZ(609deg);
}
}
.flake:nth-child(22) {
animation: s22 8s linear infinite;
animation-delay: 880ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.94;
overflow: hidden;
}
@keyframes s22 {
0% {
top: -100px;
left: 67px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 113px;
transform: rotateZ(507deg);
}
}
.flake:nth-child(23) {
animation: s23 8s linear infinite;
animation-delay: 920ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.33;
overflow: hidden;
}
@keyframes s23 {
0% {
top: -100px;
left: 576px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 540px;
transform: rotateZ(133deg);
}
}
.flake:nth-child(24) {
animation: s24 3s linear infinite;
animation-delay: 960ms;
width: 3px;
height: 3px;
position: absolute;
left: -80px;
opacity: 0.18;
overflow: hidden;
}
@keyframes s24 {
0% {
top: -100px;
left: 831px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 759px;
transform: rotateZ(225deg);
}
}
.flake:nth-child(25) {
animation: s25 7s linear infinite;
animation-delay: 1000ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.1;
overflow: hidden;
}
@keyframes s25 {
0% {
top: -100px;
left: 248px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 212px;
transform: rotateZ(39deg);
}
}
.flake:nth-child(26) {
animation: s26 5s linear infinite;
animation-delay: 1040ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.98;
overflow: hidden;
}
@keyframes s26 {
0% {
top: -100px;
left: 16px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 7px;
transform: rotateZ(323deg);
}
}
.flake:nth-child(27) {
animation: s27 3s linear infinite;
animation-delay: 1080ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.35;
overflow: hidden;
}
@keyframes s27 {
0% {
top: -100px;
left: 208px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 178px;
transform: rotateZ(512deg);
}
}
.flake:nth-child(28) {
animation: s28 7s linear infinite;
animation-delay: 1120ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.05;
overflow: hidden;
}
@keyframes s28 {
0% {
top: -100px;
left: 249px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 258px;
transform: rotateZ(205deg);
}
}
.flake:nth-child(29) {
animation: s29 5s linear infinite;
animation-delay: 1160ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.83;
overflow: hidden;
}
@keyframes s29 {
0% {
top: -100px;
left: 113px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 104px;
transform: rotateZ(660deg);
}
}
.flake:nth-child(30) {
animation: s30 3s linear infinite;
animation-delay: 1200ms;
width: 3px;
height: 3px;
position: absolute;
left: -80px;
opacity: 0.54;
overflow: hidden;
}
@keyframes s30 {
0% {
top: -100px;
left: 885px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 886px;
transform: rotateZ(571deg);
}
}
.flake:nth-child(31) {
animation: s31 8s linear infinite;
animation-delay: 1240ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.21;
overflow: hidden;
}
@keyframes s31 {
0% {
top: -100px;
left: 57px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 109px;
transform: rotateZ(223deg);
}
}
.flake:nth-child(32) {
animation: s32 4s linear infinite;
animation-delay: 1280ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.77;
overflow: hidden;
}
@keyframes s32 {
0% {
top: -100px;
left: 469px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 521px;
transform: rotateZ(264deg);
}
}
.flake:nth-child(33) {
animation: s33 7s linear infinite;
animation-delay: 1320ms;
width: 3px;
height: 3px;
position: absolute;
left: -80px;
opacity: 0.74;
overflow: hidden;
}
@keyframes s33 {
0% {
top: -100px;
left: 708px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 706px;
transform: rotateZ(576deg);
}
}
.flake:nth-child(34) {
animation: s34 5s linear infinite;
animation-delay: 1360ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.63;
overflow: hidden;
}
@keyframes s34 {
0% {
top: -100px;
left: 523px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 551px;
transform: rotateZ(378deg);
}
}
.flake:nth-child(35) {
animation: s35 3s linear infinite;
animation-delay: 1400ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.86;
overflow: hidden;
}
@keyframes s35 {
0% {
top: -100px;
left: 322px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 286px;
transform: rotateZ(461deg);
}
}
.flake:nth-child(36) {
animation: s36 6s linear infinite;
animation-delay: 1440ms;
width: 3px;
height: 3px;
position: absolute;
left: -80px;
opacity: 0.13;
overflow: hidden;
}
@keyframes s36 {
0% {
top: -100px;
left: 339px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 362px;
transform: rotateZ(657deg);
}
}
.flake:nth-child(37) {
animation: s37 7s linear infinite;
animation-delay: 1480ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.46;
overflow: hidden;
}
@keyframes s37 {
0% {
top: -100px;
left: 870px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 879px;
transform: rotateZ(183deg);
}
}
.flake:nth-child(38) {
animation: s38 6s linear infinite;
animation-delay: 1520ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.94;
overflow: hidden;
}
@keyframes s38 {
0% {
top: -100px;
left: 338px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 366px;
transform: rotateZ(197deg);
}
}
.flake:nth-child(39) {
animation: s39 3s linear infinite;
animation-delay: 1560ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.55;
overflow: hidden;
}
@keyframes s39 {
0% {
top: -100px;
left: 547px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 538px;
transform: rotateZ(875deg);
}
}
.flake:nth-child(40) {
animation: s40 8s linear infinite;
animation-delay: 1600ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.19;
overflow: hidden;
}
@keyframes s40 {
0% {
top: -100px;
left: 715px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 713px;
transform: rotateZ(424deg);
}
}
.flake:nth-child(41) {
animation: s41 3s linear infinite;
animation-delay: 1640ms;
width: 3px;
height: 3px;
position: absolute;
left: -80px;
opacity: 0.78;
overflow: hidden;
}
@keyframes s41 {
0% {
top: -100px;
left: 718px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 648px;
transform: rotateZ(851deg);
}
}
.flake:nth-child(42) {
animation: s42 4s linear infinite;
animation-delay: 1680ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.17;
overflow: hidden;
}
@keyframes s42 {
0% {
top: -100px;
left: 1134px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1170px;
transform: rotateZ(639deg);
}
}
.flake:nth-child(43) {
animation: s43 9s linear infinite;
animation-delay: 1720ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.29;
overflow: hidden;
}
@keyframes s43 {
0% {
top: -100px;
left: 508px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 516px;
transform: rotateZ(332deg);
}
}
.flake:nth-child(44) {
animation: s44 9s linear infinite;
animation-delay: 1760ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.61;
overflow: hidden;
}
@keyframes s44 {
0% {
top: -100px;
left: 1123px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1068px;
transform: rotateZ(338deg);
}
}
.flake:nth-child(45) {
animation: s45 6s linear infinite;
animation-delay: 1800ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.45;
overflow: hidden;
}
@keyframes s45 {
0% {
top: -100px;
left: 174px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 117px;
transform: rotateZ(29deg);
}
}
.flake:nth-child(46) {
animation: s46 9s linear infinite;
animation-delay: 1840ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.88;
overflow: hidden;
}
@keyframes s46 {
0% {
top: -100px;
left: 541px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 599px;
transform: rotateZ(198deg);
}
}
.flake:nth-child(47) {
animation: s47 9s linear infinite;
animation-delay: 1880ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.31;
overflow: hidden;
}
@keyframes s47 {
0% {
top: -100px;
left: 964px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1004px;
transform: rotateZ(336deg);
}
}
.flake:nth-child(48) {
animation: s48 6s linear infinite;
animation-delay: 1920ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.86;
overflow: hidden;
}
@keyframes s48 {
0% {
top: -100px;
left: 466px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 440px;
transform: rotateZ(668deg);
}
}
.flake:nth-child(49) {
animation: s49 3s linear infinite;
animation-delay: 1960ms;
width: 3px;
height: 3px;
position: absolute;
left: -80px;
opacity: 0.46;
overflow: hidden;
}
@keyframes s49 {
0% {
top: -100px;
left: 356px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 354px;
transform: rotateZ(724deg);
}
}
.flake:nth-child(50) {
animation: s50 9s linear infinite;
animation-delay: 2000ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.2;
overflow: hidden;
}
@keyframes s50 {
0% {
top: -100px;
left: 41px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 11px;
transform: rotateZ(572deg);
}
}
.flake:nth-child(51) {
animation: s51 9s linear infinite;
animation-delay: 2040ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.05;
overflow: hidden;
}
@keyframes s51 {
0% {
top: -100px;
left: 1366px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1302px;
transform: rotateZ(881deg);
}
}
.flake:nth-child(52) {
animation: s52 3s linear infinite;
animation-delay: 2080ms;
width: 3px;
height: 3px;
position: absolute;
left: -80px;
opacity: 0.98;
overflow: hidden;
}
@keyframes s52 {
0% {
top: -100px;
left: 1173px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1129px;
transform: rotateZ(414deg);
}
}
.flake:nth-child(53) {
animation: s53 7s linear infinite;
animation-delay: 2120ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.28;
overflow: hidden;
}
@keyframes s53 {
0% {
top: -100px;
left: 266px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 194px;
transform: rotateZ(222deg);
}
}
.flake:nth-child(54) {
animation: s54 5s linear infinite;
animation-delay: 2160ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.96;
overflow: hidden;
}
@keyframes s54 {
0% {
top: -100px;
left: 103px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 120px;
transform: rotateZ(663deg);
}
}
.flake:nth-child(55) {
animation: s55 9s linear infinite;
animation-delay: 2200ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.48;
overflow: hidden;
}
@keyframes s55 {
0% {
top: -100px;
left: 441px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 476px;
transform: rotateZ(538deg);
}
}
.flake:nth-child(56) {
animation: s56 9s linear infinite;
animation-delay: 2240ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.38;
overflow: hidden;
}
@keyframes s56 {
0% {
top: -100px;
left: 359px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 377px;
transform: rotateZ(32deg);
}
}
.flake:nth-child(57) {
animation: s57 6s linear infinite;
animation-delay: 2280ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.75;
overflow: hidden;
}
@keyframes s57 {
0% {
top: -100px;
left: 924px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 899px;
transform: rotateZ(420deg);
}
}
.flake:nth-child(58) {
animation: s58 4s linear infinite;
animation-delay: 2320ms;
width: 3px;
height: 3px;
position: absolute;
left: -80px;
opacity: 0.71;
overflow: hidden;
}
@keyframes s58 {
0% {
top: -100px;
left: 595px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 615px;
transform: rotateZ(482deg);
}
}
.flake:nth-child(59) {
animation: s59 5s linear infinite;
animation-delay: 2360ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.03;
overflow: hidden;
}
@keyframes s59 {
0% {
top: -100px;
left: 105px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 120px;
transform: rotateZ(403deg);
}
}
.flake:nth-child(60) {
animation: s60 9s linear infinite;
animation-delay: 2400ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.02;
overflow: hidden;
}
@keyframes s60 {
0% {
top: -100px;
left: 518px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 480px;
transform: rotateZ(593deg);
}
}
.flake:nth-child(61) {
animation: s61 8s linear infinite;
animation-delay: 2440ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.98;
overflow: hidden;
}
@keyframes s61 {
0% {
top: -100px;
left: 115px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 146px;
transform: rotateZ(124deg);
}
}
.flake:nth-child(62) {
animation: s62 4s linear infinite;
animation-delay: 2480ms;
width: 3px;
height: 3px;
position: absolute;
left: -80px;
opacity: 0.17;
overflow: hidden;
}
@keyframes s62 {
0% {
top: -100px;
left: 1236px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1158px;
transform: rotateZ(411deg);
}
}
.flake:nth-child(63) {
animation: s63 6s linear infinite;
animation-delay: 2520ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.04;
overflow: hidden;
}
@keyframes s63 {
0% {
top: -100px;
left: 923px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 906px;
transform: rotateZ(879deg);
}
}
.flake:nth-child(64) {
animation: s64 3s linear infinite;
animation-delay: 2560ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.72;
overflow: hidden;
}
@keyframes s64 {
0% {
top: -100px;
left: 428px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 465px;
transform: rotateZ(354deg);
}
}
.flake:nth-child(65) {
animation: s65 7s linear infinite;
animation-delay: 2600ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.67;
overflow: hidden;
}
@keyframes s65 {
0% {
top: -100px;
left: 958px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 966px;
transform: rotateZ(134deg);
}
}
.flake:nth-child(66) {
animation: s66 5s linear infinite;
animation-delay: 2640ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.21;
overflow: hidden;
}
@keyframes s66 {
0% {
top: -100px;
left: 442px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 413px;
transform: rotateZ(471deg);
}
}
.flake:nth-child(67) {
animation: s67 9s linear infinite;
animation-delay: 2680ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.54;
overflow: hidden;
}
@keyframes s67 {
0% {
top: -100px;
left: 34px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 88px;
transform: rotateZ(503deg);
}
}
.flake:nth-child(68) {
animation: s68 7s linear infinite;
animation-delay: 2720ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.02;
overflow: hidden;
}
@keyframes s68 {
0% {
top: -100px;
left: 720px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 671px;
transform: rotateZ(574deg);
}
}
.flake:nth-child(69) {
animation: s69 3s linear infinite;
animation-delay: 2760ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.87;
overflow: hidden;
}
@keyframes s69 {
0% {
top: -100px;
left: 541px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 615px;
transform: rotateZ(514deg);
}
}
.flake:nth-child(70) {
animation: s70 6s linear infinite;
animation-delay: 2800ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.68;
overflow: hidden;
}
@keyframes s70 {
0% {
top: -100px;
left: 1425px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1372px;
transform: rotateZ(843deg);
}
}
.flake:nth-child(71) {
animation: s71 3s linear infinite;
animation-delay: 2840ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.32;
overflow: hidden;
}
@keyframes s71 {
0% {
top: -100px;
left: 1209px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1184px;
transform: rotateZ(396deg);
}
}
.flake:nth-child(72) {
animation: s72 8s linear infinite;
animation-delay: 2880ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.82;
overflow: hidden;
}
@keyframes s72 {
0% {
top: -100px;
left: 251px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 177px;
transform: rotateZ(469deg);
}
}
.flake:nth-child(73) {
animation: s73 4s linear infinite;
animation-delay: 2920ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.99;
overflow: hidden;
}
@keyframes s73 {
0% {
top: -100px;
left: 1303px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1294px;
transform: rotateZ(148deg);
}
}
.flake:nth-child(74) {
animation: s74 9s linear infinite;
animation-delay: 2960ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.87;
overflow: hidden;
}
@keyframes s74 {
0% {
top: -100px;
left: 971px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1016px;
transform: rotateZ(406deg);
}
}
.flake:nth-child(75) {
animation: s75 4s linear infinite;
animation-delay: 3000ms;
width: 3px;
height: 3px;
position: absolute;
left: -80px;
opacity: 0.34;
overflow: hidden;
}
@keyframes s75 {
0% {
top: -100px;
left: 1170px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1157px;
transform: rotateZ(441deg);
}
}
.flake:nth-child(76) {
animation: s76 3s linear infinite;
animation-delay: 3040ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.8;
overflow: hidden;
}
@keyframes s76 {
0% {
top: -100px;
left: 967px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 944px;
transform: rotateZ(875deg);
}
}
.flake:nth-child(77) {
animation: s77 5s linear infinite;
animation-delay: 3080ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.54;
overflow: hidden;
}
@keyframes s77 {
0% {
top: -100px;
left: 302px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 263px;
transform: rotateZ(203deg);
}
}
.flake:nth-child(78) {
animation: s78 4s linear infinite;
animation-delay: 3120ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.23;
overflow: hidden;
}
@keyframes s78 {
0% {
top: -100px;
left: 1398px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1385px;
transform: rotateZ(602deg);
}
}
.flake:nth-child(79) {
animation: s79 4s linear infinite;
animation-delay: 3160ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.5;
overflow: hidden;
}
@keyframes s79 {
0% {
top: -100px;
left: 1422px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1407px;
transform: rotateZ(812deg);
}
}
.flake:nth-child(80) {
animation: s80 9s linear infinite;
animation-delay: 3200ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.34;
overflow: hidden;
}
@keyframes s80 {
0% {
top: -100px;
left: 763px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 820px;
transform: rotateZ(735deg);
}
}
.flake:nth-child(81) {
animation: s81 6s linear infinite;
animation-delay: 3240ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.72;
overflow: hidden;
}
@keyframes s81 {
0% {
top: -100px;
left: 693px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 667px;
transform: rotateZ(823deg);
}
}
.flake:nth-child(82) {
animation: s82 6s linear infinite;
animation-delay: 3280ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.92;
overflow: hidden;
}
@keyframes s82 {
0% {
top: -100px;
left: 159px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 129px;
transform: rotateZ(259deg);
}
}
.flake:nth-child(83) {
animation: s83 9s linear infinite;
animation-delay: 3320ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.4;
overflow: hidden;
}
@keyframes s83 {
0% {
top: -100px;
left: 155px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 134px;
transform: rotateZ(772deg);
}
}
.flake:nth-child(84) {
animation: s84 4s linear infinite;
animation-delay: 3360ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.2;
overflow: hidden;
}
@keyframes s84 {
0% {
top: -100px;
left: 1026px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 964px;
transform: rotateZ(783deg);
}
}
.flake:nth-child(85) {
animation: s85 6s linear infinite;
animation-delay: 3400ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.01;
overflow: hidden;
}
@keyframes s85 {
0% {
top: -100px;
left: 716px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 701px;
transform: rotateZ(894deg);
}
}
.flake:nth-child(86) {
animation: s86 7s linear infinite;
animation-delay: 3440ms;
width: 3px;
height: 3px;
position: absolute;
left: -80px;
opacity: 0.08;
overflow: hidden;
}
@keyframes s86 {
0% {
top: -100px;
left: 1200px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1281px;
transform: rotateZ(765deg);
}
}
.flake:nth-child(87) {
animation: s87 9s linear infinite;
animation-delay: 3480ms;
width: 3px;
height: 3px;
position: absolute;
left: -80px;
opacity: 0.05;
overflow: hidden;
}
@keyframes s87 {
0% {
top: -100px;
left: 998px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1056px;
transform: rotateZ(669deg);
}
}
.flake:nth-child(88) {
animation: s88 3s linear infinite;
animation-delay: 3520ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.97;
overflow: hidden;
}
@keyframes s88 {
0% {
top: -100px;
left: 1152px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1123px;
transform: rotateZ(500deg);
}
}
.flake:nth-child(89) {
animation: s89 3s linear infinite;
animation-delay: 3560ms;
width: 3px;
height: 3px;
position: absolute;
left: -80px;
opacity: 0.3;
overflow: hidden;
}
@keyframes s89 {
0% {
top: -100px;
left: 12px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 18px;
transform: rotateZ(631deg);
}
}
.flake:nth-child(90) {
animation: s90 3s linear infinite;
animation-delay: 3600ms;
width: 3px;
height: 3px;
position: absolute;
left: -80px;
opacity: 0.51;
overflow: hidden;
}
@keyframes s90 {
0% {
top: -100px;
left: 615px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 635px;
transform: rotateZ(699deg);
}
}
.flake:nth-child(91) {
animation: s91 4s linear infinite;
animation-delay: 3640ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.76;
overflow: hidden;
}
@keyframes s91 {
0% {
top: -100px;
left: 896px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 935px;
transform: rotateZ(249deg);
}
}
.flake:nth-child(92) {
animation: s92 4s linear infinite;
animation-delay: 3680ms;
width: 3px;
height: 3px;
position: absolute;
left: -80px;
opacity: 0.15;
overflow: hidden;
}
@keyframes s92 {
0% {
top: -100px;
left: 551px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 553px;
transform: rotateZ(461deg);
}
}
.flake:nth-child(93) {
animation: s93 7s linear infinite;
animation-delay: 3720ms;
width: 3px;
height: 3px;
position: absolute;
left: -80px;
opacity: 0.67;
overflow: hidden;
}
@keyframes s93 {
0% {
top: -100px;
left: 64px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 88px;
transform: rotateZ(811deg);
}
}
.flake:nth-child(94) {
animation: s94 4s linear infinite;
animation-delay: 3760ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.12;
overflow: hidden;
}
@keyframes s94 {
0% {
top: -100px;
left: 778px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 843px;
transform: rotateZ(878deg);
}
}
.flake:nth-child(95) {
animation: s95 8s linear infinite;
animation-delay: 3800ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.06;
overflow: hidden;
}
@keyframes s95 {
0% {
top: -100px;
left: 1165px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1113px;
transform: rotateZ(497deg);
}
}
.flake:nth-child(96) {
animation: s96 5s linear infinite;
animation-delay: 3840ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.16;
overflow: hidden;
}
@keyframes s96 {
0% {
top: -100px;
left: 1226px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1245px;
transform: rotateZ(369deg);
}
}
.flake:nth-child(97) {
animation: s97 7s linear infinite;
animation-delay: 3880ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.55;
overflow: hidden;
}
@keyframes s97 {
0% {
top: -100px;
left: 1117px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1097px;
transform: rotateZ(725deg);
}
}
.flake:nth-child(98) {
animation: s98 3s linear infinite;
animation-delay: 3920ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.66;
overflow: hidden;
}
@keyframes s98 {
0% {
top: -100px;
left: 171px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 190px;
transform: rotateZ(114deg);
}
}
.flake:nth-child(99) {
animation: s99 3s linear infinite;
animation-delay: 3960ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.95;
overflow: hidden;
}
@keyframes s99 {
0% {
top: -100px;
left: 504px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 543px;
transform: rotateZ(623deg);
}
}
.flake:nth-child(100) {
animation: s100 8s linear infinite;
animation-delay: 4000ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.19;
overflow: hidden;
}
@keyframes s100 {
0% {
top: -100px;
left: 1446px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1402px;
transform: rotateZ(883deg);
}
}
.flake:nth-child(101) {
animation: s101 4s linear infinite;
animation-delay: 4040ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.43;
overflow: hidden;
}
@keyframes s101 {
0% {
top: -100px;
left: 836px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 836px;
transform: rotateZ(162deg);
}
}
.flake:nth-child(102) {
animation: s102 3s linear infinite;
animation-delay: 4080ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.75;
overflow: hidden;
}
@keyframes s102 {
0% {
top: -100px;
left: 87px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 58px;
transform: rotateZ(454deg);
}
}
.flake:nth-child(103) {
animation: s103 5s linear infinite;
animation-delay: 4120ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.69;
overflow: hidden;
}
@keyframes s103 {
0% {
top: -100px;
left: 27px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: -7px;
transform: rotateZ(147deg);
}
}
.flake:nth-child(104) {
animation: s104 7s linear infinite;
animation-delay: 4160ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.88;
overflow: hidden;
}
@keyframes s104 {
0% {
top: -100px;
left: 177px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 156px;
transform: rotateZ(742deg);
}
}
.flake:nth-child(105) {
animation: s105 8s linear infinite;
animation-delay: 4200ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.91;
overflow: hidden;
}
@keyframes s105 {
0% {
top: -100px;
left: 172px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 190px;
transform: rotateZ(287deg);
}
}
.flake:nth-child(106) {
animation: s106 4s linear infinite;
animation-delay: 4240ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.5;
overflow: hidden;
}
@keyframes s106 {
0% {
top: -100px;
left: 330px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 425px;
transform: rotateZ(512deg);
}
}
.flake:nth-child(107) {
animation: s107 6s linear infinite;
animation-delay: 4280ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.3;
overflow: hidden;
}
@keyframes s107 {
0% {
top: -100px;
left: 837px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 823px;
transform: rotateZ(64deg);
}
}
.flake:nth-child(108) {
animation: s108 8s linear infinite;
animation-delay: 4320ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.92;
overflow: hidden;
}
@keyframes s108 {
0% {
top: -100px;
left: 428px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 492px;
transform: rotateZ(253deg);
}
}
.flake:nth-child(109) {
animation: s109 6s linear infinite;
animation-delay: 4360ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.99;
overflow: hidden;
}
@keyframes s109 {
0% {
top: -100px;
left: 1190px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1272px;
transform: rotateZ(564deg);
}
}
.flake:nth-child(110) {
animation: s110 7s linear infinite;
animation-delay: 4400ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.41;
overflow: hidden;
}
@keyframes s110 {
0% {
top: -100px;
left: 1450px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1488px;
transform: rotateZ(628deg);
}
}
.flake:nth-child(111) {
animation: s111 4s linear infinite;
animation-delay: 4440ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.95;
overflow: hidden;
}
@keyframes s111 {
0% {
top: -100px;
left: 326px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 387px;
transform: rotateZ(531deg);
}
}
.flake:nth-child(112) {
animation: s112 6s linear infinite;
animation-delay: 4480ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.2;
overflow: hidden;
}
@keyframes s112 {
0% {
top: -100px;
left: 1387px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1357px;
transform: rotateZ(600deg);
}
}
.flake:nth-child(113) {
animation: s113 3s linear infinite;
animation-delay: 4520ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.91;
overflow: hidden;
}
@keyframes s113 {
0% {
top: -100px;
left: 776px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 790px;
transform: rotateZ(717deg);
}
}
.flake:nth-child(114) {
animation: s114 3s linear infinite;
animation-delay: 4560ms;
width: 3px;
height: 3px;
position: absolute;
left: -80px;
opacity: 0.84;
overflow: hidden;
}
@keyframes s114 {
0% {
top: -100px;
left: 770px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 847px;
transform: rotateZ(32deg);
}
}
.flake:nth-child(115) {
animation: s115 3s linear infinite;
animation-delay: 4600ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.7;
overflow: hidden;
}
@keyframes s115 {
0% {
top: -100px;
left: 669px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 674px;
transform: rotateZ(891deg);
}
}
.flake:nth-child(116) {
animation: s116 3s linear infinite;
animation-delay: 4640ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.04;
overflow: hidden;
}
@keyframes s116 {
0% {
top: -100px;
left: 1288px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1309px;
transform: rotateZ(368deg);
}
}
.flake:nth-child(117) {
animation: s117 5s linear infinite;
animation-delay: 4680ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.85;
overflow: hidden;
}
@keyframes s117 {
0% {
top: -100px;
left: 1168px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1109px;
transform: rotateZ(736deg);
}
}
.flake:nth-child(118) {
animation: s118 9s linear infinite;
animation-delay: 4720ms;
width: 3px;
height: 3px;
position: absolute;
left: -80px;
opacity: 0.66;
overflow: hidden;
}
@keyframes s118 {
0% {
top: -100px;
left: 24px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 104px;
transform: rotateZ(266deg);
}
}
.flake:nth-child(119) {
animation: s119 7s linear infinite;
animation-delay: 4760ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.71;
overflow: hidden;
}
@keyframes s119 {
0% {
top: -100px;
left: 1121px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1100px;
transform: rotateZ(176deg);
}
}
.flake:nth-child(120) {
animation: s120 9s linear infinite;
animation-delay: 4800ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.65;
overflow: hidden;
}
@keyframes s120 {
0% {
top: -100px;
left: 405px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 456px;
transform: rotateZ(721deg);
}
}
.flake:nth-child(121) {
animation: s121 5s linear infinite;
animation-delay: 4840ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.35;
overflow: hidden;
}
@keyframes s121 {
0% {
top: -100px;
left: 1348px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1268px;
transform: rotateZ(889deg);
}
}
.flake:nth-child(122) {
animation: s122 3s linear infinite;
animation-delay: 4880ms;
width: 3px;
height: 3px;
position: absolute;
left: -80px;
opacity: 0.28;
overflow: hidden;
}
@keyframes s122 {
0% {
top: -100px;
left: 120px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 149px;
transform: rotateZ(236deg);
}
}
.flake:nth-child(123) {
animation: s123 9s linear infinite;
animation-delay: 4920ms;
width: 3px;
height: 3px;
position: absolute;
left: -80px;
opacity: 1;
overflow: hidden;
}
@keyframes s123 {
0% {
top: -100px;
left: 583px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 584px;
transform: rotateZ(207deg);
}
}
.flake:nth-child(124) {
animation: s124 3s linear infinite;
animation-delay: 4960ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.5;
overflow: hidden;
}
@keyframes s124 {
0% {
top: -100px;
left: 1189px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1185px;
transform: rotateZ(691deg);
}
}
.flake:nth-child(125) {
animation: s125 5s linear infinite;
animation-delay: 5000ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.1;
overflow: hidden;
}
@keyframes s125 {
0% {
top: -100px;
left: 1014px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1028px;
transform: rotateZ(698deg);
}
}
.flake:nth-child(126) {
animation: s126 5s linear infinite;
animation-delay: 5040ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.56;
overflow: hidden;
}
@keyframes s126 {
0% {
top: -100px;
left: 853px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 844px;
transform: rotateZ(122deg);
}
}
.flake:nth-child(127) {
animation: s127 3s linear infinite;
animation-delay: 5080ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.2;
overflow: hidden;
}
@keyframes s127 {
0% {
top: -100px;
left: 765px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 786px;
transform: rotateZ(576deg);
}
}
.flake:nth-child(128) {
animation: s128 7s linear infinite;
animation-delay: 5120ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.74;
overflow: hidden;
}
@keyframes s128 {
0% {
top: -100px;
left: 739px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 790px;
transform: rotateZ(451deg);
}
}
.flake:nth-child(129) {
animation: s129 5s linear infinite;
animation-delay: 5160ms;
width: 3px;
height: 3px;
position: absolute;
left: -80px;
opacity: 0.35;
overflow: hidden;
}
@keyframes s129 {
0% {
top: -100px;
left: 1300px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1293px;
transform: rotateZ(287deg);
}
}
.flake:nth-child(130) {
animation: s130 8s linear infinite;
animation-delay: 5200ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.06;
overflow: hidden;
}
@keyframes s130 {
0% {
top: -100px;
left: 530px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 551px;
transform: rotateZ(835deg);
}
}
.flake:nth-child(131) {
animation: s131 6s linear infinite;
animation-delay: 5240ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.94;
overflow: hidden;
}
@keyframes s131 {
0% {
top: -100px;
left: 1354px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1344px;
transform: rotateZ(159deg);
}
}
.flake:nth-child(132) {
animation: s132 5s linear infinite;
animation-delay: 5280ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.36;
overflow: hidden;
}
@keyframes s132 {
0% {
top: -100px;
left: 406px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 418px;
transform: rotateZ(126deg);
}
}
.flake:nth-child(133) {
animation: s133 8s linear infinite;
animation-delay: 5320ms;
width: 3px;
height: 3px;
position: absolute;
left: -80px;
opacity: 0.2;
overflow: hidden;
}
@keyframes s133 {
0% {
top: -100px;
left: 744px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 761px;
transform: rotateZ(565deg);
}
}
.flake:nth-child(134) {
animation: s134 4s linear infinite;
animation-delay: 5360ms;
width: 3px;
height: 3px;
position: absolute;
left: -80px;
opacity: 0.09;
overflow: hidden;
}
@keyframes s134 {
0% {
top: -100px;
left: 1013px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1019px;
transform: rotateZ(615deg);
}
}
.flake:nth-child(135) {
animation: s135 8s linear infinite;
animation-delay: 5400ms;
width: 3px;
height: 3px;
position: absolute;
left: -80px;
opacity: 0.87;
overflow: hidden;
}
@keyframes s135 {
0% {
top: -100px;
left: 256px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 269px;
transform: rotateZ(19deg);
}
}
.flake:nth-child(136) {
animation: s136 7s linear infinite;
animation-delay: 5440ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 1;
overflow: hidden;
}
@keyframes s136 {
0% {
top: -100px;
left: 252px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 272px;
transform: rotateZ(128deg);
}
}
.flake:nth-child(137) {
animation: s137 7s linear infinite;
animation-delay: 5480ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.51;
overflow: hidden;
}
@keyframes s137 {
0% {
top: -100px;
left: 196px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 275px;
transform: rotateZ(412deg);
}
}
.flake:nth-child(138) {
animation: s138 6s linear infinite;
animation-delay: 5520ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.07;
overflow: hidden;
}
@keyframes s138 {
0% {
top: -100px;
left: 1199px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1198px;
transform: rotateZ(488deg);
}
}
.flake:nth-child(139) {
animation: s139 9s linear infinite;
animation-delay: 5560ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.53;
overflow: hidden;
}
@keyframes s139 {
0% {
top: -100px;
left: 1120px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1127px;
transform: rotateZ(180deg);
}
}
.flake:nth-child(140) {
animation: s140 6s linear infinite;
animation-delay: 5600ms;
width: 3px;
height: 3px;
position: absolute;
left: -80px;
opacity: 0.27;
overflow: hidden;
}
@keyframes s140 {
0% {
top: -100px;
left: 1040px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1027px;
transform: rotateZ(240deg);
}
}
.flake:nth-child(141) {
animation: s141 3s linear infinite;
animation-delay: 5640ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.27;
overflow: hidden;
}
@keyframes s141 {
0% {
top: -100px;
left: 842px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 836px;
transform: rotateZ(822deg);
}
}
.flake:nth-child(142) {
animation: s142 3s linear infinite;
animation-delay: 5680ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.89;
overflow: hidden;
}
@keyframes s142 {
0% {
top: -100px;
left: 1146px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1164px;
transform: rotateZ(287deg);
}
}
.flake:nth-child(143) {
animation: s143 6s linear infinite;
animation-delay: 5720ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.98;
overflow: hidden;
}
@keyframes s143 {
0% {
top: -100px;
left: 730px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 709px;
transform: rotateZ(78deg);
}
}
.flake:nth-child(144) {
animation: s144 9s linear infinite;
animation-delay: 5760ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.92;
overflow: hidden;
}
@keyframes s144 {
0% {
top: -100px;
left: 66px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 58px;
transform: rotateZ(574deg);
}
}
.flake:nth-child(145) {
animation: s145 9s linear infinite;
animation-delay: 5800ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.4;
overflow: hidden;
}
@keyframes s145 {
0% {
top: -100px;
left: 966px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1005px;
transform: rotateZ(373deg);
}
}
.flake:nth-child(146) {
animation: s146 4s linear infinite;
animation-delay: 5840ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.46;
overflow: hidden;
}
@keyframes s146 {
0% {
top: -100px;
left: 1439px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1462px;
transform: rotateZ(754deg);
}
}
.flake:nth-child(147) {
animation: s147 4s linear infinite;
animation-delay: 5880ms;
width: 3px;
height: 3px;
position: absolute;
left: -80px;
opacity: 0.39;
overflow: hidden;
}
@keyframes s147 {
0% {
top: -100px;
left: 622px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 576px;
transform: rotateZ(588deg);
}
}
.flake:nth-child(148) {
animation: s148 5s linear infinite;
animation-delay: 5920ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.31;
overflow: hidden;
}
@keyframes s148 {
0% {
top: -100px;
left: 241px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 263px;
transform: rotateZ(252deg);
}
}
.flake:nth-child(149) {
animation: s149 3s linear infinite;
animation-delay: 5960ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.96;
overflow: hidden;
}
@keyframes s149 {
0% {
top: -100px;
left: 745px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 792px;
transform: rotateZ(15deg);
}
}
.flake:nth-child(150) {
animation: s150 8s linear infinite;
animation-delay: 6000ms;
width: 3px;
height: 3px;
position: absolute;
left: -80px;
opacity: 0.19;
overflow: hidden;
}
@keyframes s150 {
0% {
top: -100px;
left: 26px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 7px;
transform: rotateZ(698deg);
}
}
.flake:nth-child(151) {
animation: s151 4s linear infinite;
animation-delay: 6040ms;
width: 3px;
height: 3px;
position: absolute;
left: -80px;
opacity: 0.87;
overflow: hidden;
}
@keyframes s151 {
0% {
top: -100px;
left: 36px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: -14px;
transform: rotateZ(501deg);
}
}
.flake:nth-child(152) {
animation: s152 8s linear infinite;
animation-delay: 6080ms;
width: 3px;
height: 3px;
position: absolute;
left: -80px;
opacity: 0.98;
overflow: hidden;
}
@keyframes s152 {
0% {
top: -100px;
left: 735px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 663px;
transform: rotateZ(17deg);
}
}
.flake:nth-child(153) {
animation: s153 8s linear infinite;
animation-delay: 6120ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.96;
overflow: hidden;
}
@keyframes s153 {
0% {
top: -100px;
left: 1050px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1085px;
transform: rotateZ(230deg);
}
}
.flake:nth-child(154) {
animation: s154 9s linear infinite;
animation-delay: 6160ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.77;
overflow: hidden;
}
@keyframes s154 {
0% {
top: -100px;
left: 1253px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1273px;
transform: rotateZ(738deg);
}
}
.flake:nth-child(155) {
animation: s155 9s linear infinite;
animation-delay: 6200ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.65;
overflow: hidden;
}
@keyframes s155 {
0% {
top: -100px;
left: 187px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 215px;
transform: rotateZ(599deg);
}
}
.flake:nth-child(156) {
animation: s156 8s linear infinite;
animation-delay: 6240ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.73;
overflow: hidden;
}
@keyframes s156 {
0% {
top: -100px;
left: 1109px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1082px;
transform: rotateZ(36deg);
}
}
.flake:nth-child(157) {
animation: s157 3s linear infinite;
animation-delay: 6280ms;
width: 3px;
height: 3px;
position: absolute;
left: -80px;
opacity: 0.35;
overflow: hidden;
}
@keyframes s157 {
0% {
top: -100px;
left: 702px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 750px;
transform: rotateZ(328deg);
}
}
.flake:nth-child(158) {
animation: s158 7s linear infinite;
animation-delay: 6320ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.73;
overflow: hidden;
}
@keyframes s158 {
0% {
top: -100px;
left: 53px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 47px;
transform: rotateZ(270deg);
}
}
.flake:nth-child(159) {
animation: s159 8s linear infinite;
animation-delay: 6360ms;
width: 3px;
height: 3px;
position: absolute;
left: -80px;
opacity: 0.66;
overflow: hidden;
}
@keyframes s159 {
0% {
top: -100px;
left: 1009px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1074px;
transform: rotateZ(759deg);
}
}
.flake:nth-child(160) {
animation: s160 8s linear infinite;
animation-delay: 6400ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.66;
overflow: hidden;
}
@keyframes s160 {
0% {
top: -100px;
left: 1250px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1196px;
transform: rotateZ(148deg);
}
}
.flake:nth-child(161) {
animation: s161 6s linear infinite;
animation-delay: 6440ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.73;
overflow: hidden;
}
@keyframes s161 {
0% {
top: -100px;
left: 126px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 80px;
transform: rotateZ(666deg);
}
}
.flake:nth-child(162) {
animation: s162 5s linear infinite;
animation-delay: 6480ms;
width: 3px;
height: 3px;
position: absolute;
left: -80px;
opacity: 0.16;
overflow: hidden;
}
@keyframes s162 {
0% {
top: -100px;
left: 959px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 890px;
transform: rotateZ(93deg);
}
}
.flake:nth-child(163) {
animation: s163 4s linear infinite;
animation-delay: 6520ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.25;
overflow: hidden;
}
@keyframes s163 {
0% {
top: -100px;
left: 1095px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1079px;
transform: rotateZ(144deg);
}
}
.flake:nth-child(164) {
animation: s164 7s linear infinite;
animation-delay: 6560ms;
width: 3px;
height: 3px;
position: absolute;
left: -80px;
opacity: 0.01;
overflow: hidden;
}
@keyframes s164 {
0% {
top: -100px;
left: 937px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 874px;
transform: rotateZ(36deg);
}
}
.flake:nth-child(165) {
animation: s165 5s linear infinite;
animation-delay: 6600ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.77;
overflow: hidden;
}
@keyframes s165 {
0% {
top: -100px;
left: 652px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 588px;
transform: rotateZ(494deg);
}
}
.flake:nth-child(166) {
animation: s166 9s linear infinite;
animation-delay: 6640ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.17;
overflow: hidden;
}
@keyframes s166 {
0% {
top: -100px;
left: 237px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 268px;
transform: rotateZ(714deg);
}
}
.flake:nth-child(167) {
animation: s167 5s linear infinite;
animation-delay: 6680ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.08;
overflow: hidden;
}
@keyframes s167 {
0% {
top: -100px;
left: 1170px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1181px;
transform: rotateZ(9deg);
}
}
.flake:nth-child(168) {
animation: s168 5s linear infinite;
animation-delay: 6720ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.88;
overflow: hidden;
}
@keyframes s168 {
0% {
top: -100px;
left: 486px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 464px;
transform: rotateZ(505deg);
}
}
.flake:nth-child(169) {
animation: s169 3s linear infinite;
animation-delay: 6760ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.85;
overflow: hidden;
}
@keyframes s169 {
0% {
top: -100px;
left: 911px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 915px;
transform: rotateZ(219deg);
}
}
.flake:nth-child(170) {
animation: s170 4s linear infinite;
animation-delay: 6800ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.37;
overflow: hidden;
}
@keyframes s170 {
0% {
top: -100px;
left: 1423px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1419px;
transform: rotateZ(552deg);
}
}
.flake:nth-child(171) {
animation: s171 8s linear infinite;
animation-delay: 6840ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.37;
overflow: hidden;
}
@keyframes s171 {
0% {
top: -100px;
left: 249px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 258px;
transform: rotateZ(650deg);
}
}
.flake:nth-child(172) {
animation: s172 7s linear infinite;
animation-delay: 6880ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.38;
overflow: hidden;
}
@keyframes s172 {
0% {
top: -100px;
left: 893px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 948px;
transform: rotateZ(329deg);
}
}
.flake:nth-child(173) {
animation: s173 4s linear infinite;
animation-delay: 6920ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.94;
overflow: hidden;
}
@keyframes s173 {
0% {
top: -100px;
left: 1409px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1386px;
transform: rotateZ(3deg);
}
}
.flake:nth-child(174) {
animation: s174 5s linear infinite;
animation-delay: 6960ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.25;
overflow: hidden;
}
@keyframes s174 {
0% {
top: -100px;
left: 486px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 461px;
transform: rotateZ(631deg);
}
}
.flake:nth-child(175) {
animation: s175 8s linear infinite;
animation-delay: 7000ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.2;
overflow: hidden;
}
@keyframes s175 {
0% {
top: -100px;
left: 571px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 613px;
transform: rotateZ(424deg);
}
}
.flake:nth-child(176) {
animation: s176 3s linear infinite;
animation-delay: 7040ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.65;
overflow: hidden;
}
@keyframes s176 {
0% {
top: -100px;
left: 1378px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1446px;
transform: rotateZ(277deg);
}
}
.flake:nth-child(177) {
animation: s177 3s linear infinite;
animation-delay: 7080ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.52;
overflow: hidden;
}
@keyframes s177 {
0% {
top: -100px;
left: 1150px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1079px;
transform: rotateZ(143deg);
}
}
.flake:nth-child(178) {
animation: s178 4s linear infinite;
animation-delay: 7120ms;
width: 3px;
height: 3px;
position: absolute;
left: -80px;
opacity: 0.89;
overflow: hidden;
}
@keyframes s178 {
0% {
top: -100px;
left: 868px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 884px;
transform: rotateZ(153deg);
}
}
.flake:nth-child(179) {
animation: s179 9s linear infinite;
animation-delay: 7160ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.28;
overflow: hidden;
}
@keyframes s179 {
0% {
top: -100px;
left: 770px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 761px;
transform: rotateZ(241deg);
}
}
.flake:nth-child(180) {
animation: s180 6s linear infinite;
animation-delay: 7200ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.73;
overflow: hidden;
}
@keyframes s180 {
0% {
top: -100px;
left: 1336px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1280px;
transform: rotateZ(510deg);
}
}
.flake:nth-child(181) {
animation: s181 3s linear infinite;
animation-delay: 7240ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.04;
overflow: hidden;
}
@keyframes s181 {
0% {
top: -100px;
left: 989px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 970px;
transform: rotateZ(387deg);
}
}
.flake:nth-child(182) {
animation: s182 7s linear infinite;
animation-delay: 7280ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.24;
overflow: hidden;
}
@keyframes s182 {
0% {
top: -100px;
left: 702px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 739px;
transform: rotateZ(637deg);
}
}
.flake:nth-child(183) {
animation: s183 5s linear infinite;
animation-delay: 7320ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.98;
overflow: hidden;
}
@keyframes s183 {
0% {
top: -100px;
left: 99px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 110px;
transform: rotateZ(742deg);
}
}
.flake:nth-child(184) {
animation: s184 5s linear infinite;
animation-delay: 7360ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.41;
overflow: hidden;
}
@keyframes s184 {
0% {
top: -100px;
left: 42px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 16px;
transform: rotateZ(677deg);
}
}
.flake:nth-child(185) {
animation: s185 3s linear infinite;
animation-delay: 7400ms;
width: 3px;
height: 3px;
position: absolute;
left: -80px;
opacity: 0.01;
overflow: hidden;
}
@keyframes s185 {
0% {
top: -100px;
left: 1317px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1353px;
transform: rotateZ(365deg);
}
}
.flake:nth-child(186) {
animation: s186 4s linear infinite;
animation-delay: 7440ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.27;
overflow: hidden;
}
@keyframes s186 {
0% {
top: -100px;
left: 674px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 724px;
transform: rotateZ(474deg);
}
}
.flake:nth-child(187) {
animation: s187 4s linear infinite;
animation-delay: 7480ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.74;
overflow: hidden;
}
@keyframes s187 {
0% {
top: -100px;
left: 209px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 185px;
transform: rotateZ(98deg);
}
}
.flake:nth-child(188) {
animation: s188 7s linear infinite;
animation-delay: 7520ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.51;
overflow: hidden;
}
@keyframes s188 {
0% {
top: -100px;
left: 770px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 746px;
transform: rotateZ(882deg);
}
}
.flake:nth-child(189) {
animation: s189 8s linear infinite;
animation-delay: 7560ms;
width: 3px;
height: 3px;
position: absolute;
left: -80px;
opacity: 0.86;
overflow: hidden;
}
@keyframes s189 {
0% {
top: -100px;
left: 765px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 815px;
transform: rotateZ(868deg);
}
}
.flake:nth-child(190) {
animation: s190 9s linear infinite;
animation-delay: 7600ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.46;
overflow: hidden;
}
@keyframes s190 {
0% {
top: -100px;
left: 547px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 518px;
transform: rotateZ(579deg);
}
}
.flake:nth-child(191) {
animation: s191 8s linear infinite;
animation-delay: 7640ms;
width: 3px;
height: 3px;
position: absolute;
left: -80px;
opacity: 0.4;
overflow: hidden;
}
@keyframes s191 {
0% {
top: -100px;
left: 45px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 130px;
transform: rotateZ(256deg);
}
}
.flake:nth-child(192) {
animation: s192 5s linear infinite;
animation-delay: 7680ms;
width: 3px;
height: 3px;
position: absolute;
left: -80px;
opacity: 0.96;
overflow: hidden;
}
@keyframes s192 {
0% {
top: -100px;
left: 783px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 778px;
transform: rotateZ(665deg);
}
}
.flake:nth-child(193) {
animation: s193 5s linear infinite;
animation-delay: 7720ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.28;
overflow: hidden;
}
@keyframes s193 {
0% {
top: -100px;
left: 642px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 567px;
transform: rotateZ(379deg);
}
}
.flake:nth-child(194) {
animation: s194 9s linear infinite;
animation-delay: 7760ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.65;
overflow: hidden;
}
@keyframes s194 {
0% {
top: -100px;
left: 477px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 495px;
transform: rotateZ(633deg);
}
}
.flake:nth-child(195) {
animation: s195 9s linear infinite;
animation-delay: 7800ms;
width: 3px;
height: 3px;
position: absolute;
left: -80px;
opacity: 0.38;
overflow: hidden;
}
@keyframes s195 {
0% {
top: -100px;
left: 624px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 624px;
transform: rotateZ(646deg);
}
}
.flake:nth-child(196) {
animation: s196 3s linear infinite;
animation-delay: 7840ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.22;
overflow: hidden;
}
@keyframes s196 {
0% {
top: -100px;
left: 3px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 44px;
transform: rotateZ(223deg);
}
}
.flake:nth-child(197) {
animation: s197 6s linear infinite;
animation-delay: 7880ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.84;
overflow: hidden;
}
@keyframes s197 {
0% {
top: -100px;
left: 234px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 245px;
transform: rotateZ(643deg);
}
}
.flake:nth-child(198) {
animation: s198 9s linear infinite;
animation-delay: 7920ms;
width: 3px;
height: 3px;
position: absolute;
left: -80px;
opacity: 0.81;
overflow: hidden;
}
@keyframes s198 {
0% {
top: -100px;
left: 261px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 274px;
transform: rotateZ(590deg);
}
}
.flake:nth-child(199) {
animation: s199 3s linear infinite;
animation-delay: 7960ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.31;
overflow: hidden;
}
@keyframes s199 {
0% {
top: -100px;
left: 203px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 215px;
transform: rotateZ(39deg);
}
}
.flake:nth-child(200) {
animation: s200 9s linear infinite;
animation-delay: 8000ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.99;
overflow: hidden;
}
@keyframes s200 {
0% {
top: -100px;
left: 969px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 975px;
transform: rotateZ(371deg);
}
}
.flake:nth-child(201) {
animation: s201 7s linear infinite;
animation-delay: 8040ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.56;
overflow: hidden;
}
@keyframes s201 {
0% {
top: -100px;
left: 1141px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1140px;
transform: rotateZ(443deg);
}
}
.flake:nth-child(202) {
animation: s202 7s linear infinite;
animation-delay: 8080ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.41;
overflow: hidden;
}
@keyframes s202 {
0% {
top: -100px;
left: 731px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 705px;
transform: rotateZ(289deg);
}
}
.flake:nth-child(203) {
animation: s203 7s linear infinite;
animation-delay: 8120ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.01;
overflow: hidden;
}
@keyframes s203 {
0% {
top: -100px;
left: 970px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 979px;
transform: rotateZ(224deg);
}
}
.flake:nth-child(204) {
animation: s204 4s linear infinite;
animation-delay: 8160ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.85;
overflow: hidden;
}
@keyframes s204 {
0% {
top: -100px;
left: 270px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 199px;
transform: rotateZ(190deg);
}
}
.flake:nth-child(205) {
animation: s205 4s linear infinite;
animation-delay: 8200ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.84;
overflow: hidden;
}
@keyframes s205 {
0% {
top: -100px;
left: 1160px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1193px;
transform: rotateZ(164deg);
}
}
.flake:nth-child(206) {
animation: s206 6s linear infinite;
animation-delay: 8240ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.94;
overflow: hidden;
}
@keyframes s206 {
0% {
top: -100px;
left: 1357px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1338px;
transform: rotateZ(46deg);
}
}
.flake:nth-child(207) {
animation: s207 3s linear infinite;
animation-delay: 8280ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.97;
overflow: hidden;
}
@keyframes s207 {
0% {
top: -100px;
left: 326px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 243px;
transform: rotateZ(707deg);
}
}
.flake:nth-child(208) {
animation: s208 6s linear infinite;
animation-delay: 8320ms;
width: 3px;
height: 3px;
position: absolute;
left: -80px;
opacity: 0.52;
overflow: hidden;
}
@keyframes s208 {
0% {
top: -100px;
left: 1065px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1048px;
transform: rotateZ(371deg);
}
}
.flake:nth-child(209) {
animation: s209 4s linear infinite;
animation-delay: 8360ms;
width: 3px;
height: 3px;
position: absolute;
left: -80px;
opacity: 0.81;
overflow: hidden;
}
@keyframes s209 {
0% {
top: -100px;
left: 835px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 836px;
transform: rotateZ(406deg);
}
}
.flake:nth-child(210) {
animation: s210 8s linear infinite;
animation-delay: 8400ms;
width: 3px;
height: 3px;
position: absolute;
left: -80px;
opacity: 0.7;
overflow: hidden;
}
@keyframes s210 {
0% {
top: -100px;
left: 800px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 786px;
transform: rotateZ(273deg);
}
}
.flake:nth-child(211) {
animation: s211 4s linear infinite;
animation-delay: 8440ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.54;
overflow: hidden;
}
@keyframes s211 {
0% {
top: -100px;
left: 266px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 195px;
transform: rotateZ(345deg);
}
}
.flake:nth-child(212) {
animation: s212 9s linear infinite;
animation-delay: 8480ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.42;
overflow: hidden;
}
@keyframes s212 {
0% {
top: -100px;
left: 119px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 140px;
transform: rotateZ(796deg);
}
}
.flake:nth-child(213) {
animation: s213 5s linear infinite;
animation-delay: 8520ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.61;
overflow: hidden;
}
@keyframes s213 {
0% {
top: -100px;
left: 200px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 149px;
transform: rotateZ(630deg);
}
}
.flake:nth-child(214) {
animation: s214 8s linear infinite;
animation-delay: 8560ms;
width: 3px;
height: 3px;
position: absolute;
left: -80px;
opacity: 0.18;
overflow: hidden;
}
@keyframes s214 {
0% {
top: -100px;
left: 1328px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1311px;
transform: rotateZ(875deg);
}
}
.flake:nth-child(215) {
animation: s215 9s linear infinite;
animation-delay: 8600ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.09;
overflow: hidden;
}
@keyframes s215 {
0% {
top: -100px;
left: 1257px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1284px;
transform: rotateZ(372deg);
}
}
.flake:nth-child(216) {
animation: s216 5s linear infinite;
animation-delay: 8640ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.42;
overflow: hidden;
}
@keyframes s216 {
0% {
top: -100px;
left: 217px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 299px;
transform: rotateZ(567deg);
}
}
.flake:nth-child(217) {
animation: s217 9s linear infinite;
animation-delay: 8680ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.72;
overflow: hidden;
}
@keyframes s217 {
0% {
top: -100px;
left: 1101px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1108px;
transform: rotateZ(818deg);
}
}
.flake:nth-child(218) {
animation: s218 3s linear infinite;
animation-delay: 8720ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.83;
overflow: hidden;
}
@keyframes s218 {
0% {
top: -100px;
left: 16px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 37px;
transform: rotateZ(830deg);
}
}
.flake:nth-child(219) {
animation: s219 8s linear infinite;
animation-delay: 8760ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.04;
overflow: hidden;
}
@keyframes s219 {
0% {
top: -100px;
left: 1150px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1184px;
transform: rotateZ(379deg);
}
}
.flake:nth-child(220) {
animation: s220 7s linear infinite;
animation-delay: 8800ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.52;
overflow: hidden;
}
@keyframes s220 {
0% {
top: -100px;
left: 1222px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1254px;
transform: rotateZ(135deg);
}
}
.flake:nth-child(221) {
animation: s221 5s linear infinite;
animation-delay: 8840ms;
width: 3px;
height: 3px;
position: absolute;
left: -80px;
opacity: 0.1;
overflow: hidden;
}
@keyframes s221 {
0% {
top: -100px;
left: 1010px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1051px;
transform: rotateZ(346deg);
}
}
.flake:nth-child(222) {
animation: s222 4s linear infinite;
animation-delay: 8880ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.03;
overflow: hidden;
}
@keyframes s222 {
0% {
top: -100px;
left: 1326px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1247px;
transform: rotateZ(797deg);
}
}
.flake:nth-child(223) {
animation: s223 9s linear infinite;
animation-delay: 8920ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.2;
overflow: hidden;
}
@keyframes s223 {
0% {
top: -100px;
left: 1432px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1463px;
transform: rotateZ(162deg);
}
}
.flake:nth-child(224) {
animation: s224 8s linear infinite;
animation-delay: 8960ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.55;
overflow: hidden;
}
@keyframes s224 {
0% {
top: -100px;
left: 41px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 74px;
transform: rotateZ(52deg);
}
}
.flake:nth-child(225) {
animation: s225 3s linear infinite;
animation-delay: 9000ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.34;
overflow: hidden;
}
@keyframes s225 {
0% {
top: -100px;
left: 972px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 995px;
transform: rotateZ(435deg);
}
}
.flake:nth-child(226) {
animation: s226 5s linear infinite;
animation-delay: 9040ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.52;
overflow: hidden;
}
@keyframes s226 {
0% {
top: -100px;
left: 1140px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1124px;
transform: rotateZ(677deg);
}
}
.flake:nth-child(227) {
animation: s227 9s linear infinite;
animation-delay: 9080ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.95;
overflow: hidden;
}
@keyframes s227 {
0% {
top: -100px;
left: 1166px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1086px;
transform: rotateZ(870deg);
}
}
.flake:nth-child(228) {
animation: s228 4s linear infinite;
animation-delay: 9120ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.84;
overflow: hidden;
}
@keyframes s228 {
0% {
top: -100px;
left: 90px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 120px;
transform: rotateZ(199deg);
}
}
.flake:nth-child(229) {
animation: s229 5s linear infinite;
animation-delay: 9160ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.19;
overflow: hidden;
}
@keyframes s229 {
0% {
top: -100px;
left: 1255px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1203px;
transform: rotateZ(263deg);
}
}
.flake:nth-child(230) {
animation: s230 5s linear infinite;
animation-delay: 9200ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.35;
overflow: hidden;
}
@keyframes s230 {
0% {
top: -100px;
left: 106px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 109px;
transform: rotateZ(102deg);
}
}
.flake:nth-child(231) {
animation: s231 4s linear infinite;
animation-delay: 9240ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.03;
overflow: hidden;
}
@keyframes s231 {
0% {
top: -100px;
left: 614px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 616px;
transform: rotateZ(752deg);
}
}
.flake:nth-child(232) {
animation: s232 3s linear infinite;
animation-delay: 9280ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.69;
overflow: hidden;
}
@keyframes s232 {
0% {
top: -100px;
left: 699px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 722px;
transform: rotateZ(387deg);
}
}
.flake:nth-child(233) {
animation: s233 3s linear infinite;
animation-delay: 9320ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.96;
overflow: hidden;
}
@keyframes s233 {
0% {
top: -100px;
left: 918px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 982px;
transform: rotateZ(780deg);
}
}
.flake:nth-child(234) {
animation: s234 9s linear infinite;
animation-delay: 9360ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.56;
overflow: hidden;
}
@keyframes s234 {
0% {
top: -100px;
left: 587px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 524px;
transform: rotateZ(520deg);
}
}
.flake:nth-child(235) {
animation: s235 9s linear infinite;
animation-delay: 9400ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.95;
overflow: hidden;
}
@keyframes s235 {
0% {
top: -100px;
left: 1419px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1389px;
transform: rotateZ(348deg);
}
}
.flake:nth-child(236) {
animation: s236 3s linear infinite;
animation-delay: 9440ms;
width: 3px;
height: 3px;
position: absolute;
left: -80px;
opacity: 0.5;
overflow: hidden;
}
@keyframes s236 {
0% {
top: -100px;
left: 1008px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1028px;
transform: rotateZ(111deg);
}
}
.flake:nth-child(237) {
animation: s237 4s linear infinite;
animation-delay: 9480ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.32;
overflow: hidden;
}
@keyframes s237 {
0% {
top: -100px;
left: 1113px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1093px;
transform: rotateZ(893deg);
}
}
.flake:nth-child(238) {
animation: s238 4s linear infinite;
animation-delay: 9520ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.16;
overflow: hidden;
}
@keyframes s238 {
0% {
top: -100px;
left: 716px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 748px;
transform: rotateZ(219deg);
}
}
.flake:nth-child(239) {
animation: s239 9s linear infinite;
animation-delay: 9560ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.32;
overflow: hidden;
}
@keyframes s239 {
0% {
top: -100px;
left: 1153px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1173px;
transform: rotateZ(718deg);
}
}
.flake:nth-child(240) {
animation: s240 8s linear infinite;
animation-delay: 9600ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.5;
overflow: hidden;
}
@keyframes s240 {
0% {
top: -100px;
left: 325px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 368px;
transform: rotateZ(176deg);
}
}
.flake:nth-child(241) {
animation: s241 8s linear infinite;
animation-delay: 9640ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.6;
overflow: hidden;
}
@keyframes s241 {
0% {
top: -100px;
left: 377px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 397px;
transform: rotateZ(417deg);
}
}
.flake:nth-child(242) {
animation: s242 9s linear infinite;
animation-delay: 9680ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.25;
overflow: hidden;
}
@keyframes s242 {
0% {
top: -100px;
left: 778px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 697px;
transform: rotateZ(69deg);
}
}
.flake:nth-child(243) {
animation: s243 8s linear infinite;
animation-delay: 9720ms;
width: 3px;
height: 3px;
position: absolute;
left: -80px;
opacity: 0.9;
overflow: hidden;
}
@keyframes s243 {
0% {
top: -100px;
left: 260px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 281px;
transform: rotateZ(682deg);
}
}
.flake:nth-child(244) {
animation: s244 3s linear infinite;
animation-delay: 9760ms;
width: 3px;
height: 3px;
position: absolute;
left: -80px;
opacity: 0.99;
overflow: hidden;
}
@keyframes s244 {
0% {
top: -100px;
left: 642px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 666px;
transform: rotateZ(788deg);
}
}
.flake:nth-child(245) {
animation: s245 5s linear infinite;
animation-delay: 9800ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.63;
overflow: hidden;
}
@keyframes s245 {
0% {
top: -100px;
left: 1326px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1392px;
transform: rotateZ(474deg);
}
}
.flake:nth-child(246) {
animation: s246 6s linear infinite;
animation-delay: 9840ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.58;
overflow: hidden;
}
@keyframes s246 {
0% {
top: -100px;
left: 288px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 312px;
transform: rotateZ(150deg);
}
}
.flake:nth-child(247) {
animation: s247 6s linear infinite;
animation-delay: 9880ms;
width: 3px;
height: 3px;
position: absolute;
left: -80px;
opacity: 0.5;
overflow: hidden;
}
@keyframes s247 {
0% {
top: -100px;
left: 456px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 412px;
transform: rotateZ(807deg);
}
}
.flake:nth-child(248) {
animation: s248 6s linear infinite;
animation-delay: 9920ms;
width: 3px;
height: 3px;
position: absolute;
left: -80px;
opacity: 0.12;
overflow: hidden;
}
@keyframes s248 {
0% {
top: -100px;
left: 282px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 295px;
transform: rotateZ(273deg);
}
}
.flake:nth-child(249) {
animation: s249 4s linear infinite;
animation-delay: 9960ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.77;
overflow: hidden;
}
@keyframes s249 {
0% {
top: -100px;
left: 950px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1007px;
transform: rotateZ(58deg);
}
}
.flake:nth-child(250) {
animation: s250 5s linear infinite;
animation-delay: 10000ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.63;
overflow: hidden;
}
@keyframes s250 {
0% {
top: -100px;
left: 1402px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1377px;
transform: rotateZ(31deg);
}
}
.flake:nth-child(251) {
animation: s251 8s linear infinite;
animation-delay: 10040ms;
width: 3px;
height: 3px;
position: absolute;
left: -80px;
opacity: 0.51;
overflow: hidden;
}
@keyframes s251 {
0% {
top: -100px;
left: 327px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 365px;
transform: rotateZ(96deg);
}
}
.flake:nth-child(252) {
animation: s252 4s linear infinite;
animation-delay: 10080ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.22;
overflow: hidden;
}
@keyframes s252 {
0% {
top: -100px;
left: 296px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 366px;
transform: rotateZ(694deg);
}
}
.flake:nth-child(253) {
animation: s253 9s linear infinite;
animation-delay: 10120ms;
width: 3px;
height: 3px;
position: absolute;
left: -80px;
opacity: 0.88;
overflow: hidden;
}
@keyframes s253 {
0% {
top: -100px;
left: 784px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 755px;
transform: rotateZ(448deg);
}
}
.flake:nth-child(254) {
animation: s254 5s linear infinite;
animation-delay: 10160ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.33;
overflow: hidden;
}
@keyframes s254 {
0% {
top: -100px;
left: 356px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 452px;
transform: rotateZ(716deg);
}
}
.flake:nth-child(255) {
animation: s255 5s linear infinite;
animation-delay: 10200ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.22;
overflow: hidden;
}
@keyframes s255 {
0% {
top: -100px;
left: 616px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 582px;
transform: rotateZ(423deg);
}
}
.flake:nth-child(256) {
animation: s256 5s linear infinite;
animation-delay: 10240ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.8;
overflow: hidden;
}
@keyframes s256 {
0% {
top: -100px;
left: 634px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 608px;
transform: rotateZ(99deg);
}
}
.flake:nth-child(257) {
animation: s257 7s linear infinite;
animation-delay: 10280ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.61;
overflow: hidden;
}
@keyframes s257 {
0% {
top: -100px;
left: 3px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 43px;
transform: rotateZ(354deg);
}
}
.flake:nth-child(258) {
animation: s258 3s linear infinite;
animation-delay: 10320ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.33;
overflow: hidden;
}
@keyframes s258 {
0% {
top: -100px;
left: 200px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 231px;
transform: rotateZ(676deg);
}
}
.flake:nth-child(259) {
animation: s259 6s linear infinite;
animation-delay: 10360ms;
width: 3px;
height: 3px;
position: absolute;
left: -80px;
opacity: 0.94;
overflow: hidden;
}
@keyframes s259 {
0% {
top: -100px;
left: 484px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 510px;
transform: rotateZ(161deg);
}
}
.flake:nth-child(260) {
animation: s260 4s linear infinite;
animation-delay: 10400ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.27;
overflow: hidden;
}
@keyframes s260 {
0% {
top: -100px;
left: 196px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 180px;
transform: rotateZ(376deg);
}
}
.flake:nth-child(261) {
animation: s261 8s linear infinite;
animation-delay: 10440ms;
width: 3px;
height: 3px;
position: absolute;
left: -80px;
opacity: 0.49;
overflow: hidden;
}
@keyframes s261 {
0% {
top: -100px;
left: 132px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 98px;
transform: rotateZ(585deg);
}
}
.flake:nth-child(262) {
animation: s262 5s linear infinite;
animation-delay: 10480ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.91;
overflow: hidden;
}
@keyframes s262 {
0% {
top: -100px;
left: 20px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 81px;
transform: rotateZ(812deg);
}
}
.flake:nth-child(263) {
animation: s263 4s linear infinite;
animation-delay: 10520ms;
width: 3px;
height: 3px;
position: absolute;
left: -80px;
opacity: 0.32;
overflow: hidden;
}
@keyframes s263 {
0% {
top: -100px;
left: 224px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 151px;
transform: rotateZ(76deg);
}
}
.flake:nth-child(264) {
animation: s264 4s linear infinite;
animation-delay: 10560ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.74;
overflow: hidden;
}
@keyframes s264 {
0% {
top: -100px;
left: 883px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 815px;
transform: rotateZ(508deg);
}
}
.flake:nth-child(265) {
animation: s265 3s linear infinite;
animation-delay: 10600ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.96;
overflow: hidden;
}
@keyframes s265 {
0% {
top: -100px;
left: 799px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 814px;
transform: rotateZ(170deg);
}
}
.flake:nth-child(266) {
animation: s266 9s linear infinite;
animation-delay: 10640ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.87;
overflow: hidden;
}
@keyframes s266 {
0% {
top: -100px;
left: 332px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 406px;
transform: rotateZ(175deg);
}
}
.flake:nth-child(267) {
animation: s267 5s linear infinite;
animation-delay: 10680ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.23;
overflow: hidden;
}
@keyframes s267 {
0% {
top: -100px;
left: 83px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 69px;
transform: rotateZ(801deg);
}
}
.flake:nth-child(268) {
animation: s268 8s linear infinite;
animation-delay: 10720ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.18;
overflow: hidden;
}
@keyframes s268 {
0% {
top: -100px;
left: 421px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 391px;
transform: rotateZ(488deg);
}
}
.flake:nth-child(269) {
animation: s269 7s linear infinite;
animation-delay: 10760ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.37;
overflow: hidden;
}
@keyframes s269 {
0% {
top: -100px;
left: 683px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 671px;
transform: rotateZ(21deg);
}
}
.flake:nth-child(270) {
animation: s270 3s linear infinite;
animation-delay: 10800ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.81;
overflow: hidden;
}
@keyframes s270 {
0% {
top: -100px;
left: 547px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 520px;
transform: rotateZ(759deg);
}
}
.flake:nth-child(271) {
animation: s271 5s linear infinite;
animation-delay: 10840ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.15;
overflow: hidden;
}
@keyframes s271 {
0% {
top: -100px;
left: 35px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: -45px;
transform: rotateZ(29deg);
}
}
.flake:nth-child(272) {
animation: s272 8s linear infinite;
animation-delay: 10880ms;
width: 3px;
height: 3px;
position: absolute;
left: -80px;
opacity: 0.19;
overflow: hidden;
}
@keyframes s272 {
0% {
top: -100px;
left: 308px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 363px;
transform: rotateZ(824deg);
}
}
.flake:nth-child(273) {
animation: s273 5s linear infinite;
animation-delay: 10920ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.65;
overflow: hidden;
}
@keyframes s273 {
0% {
top: -100px;
left: 993px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 949px;
transform: rotateZ(130deg);
}
}
.flake:nth-child(274) {
animation: s274 3s linear infinite;
animation-delay: 10960ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.75;
overflow: hidden;
}
@keyframes s274 {
0% {
top: -100px;
left: 1210px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1224px;
transform: rotateZ(140deg);
}
}
.flake:nth-child(275) {
animation: s275 9s linear infinite;
animation-delay: 11000ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.78;
overflow: hidden;
}
@keyframes s275 {
0% {
top: -100px;
left: 1214px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1186px;
transform: rotateZ(158deg);
}
}
.flake:nth-child(276) {
animation: s276 9s linear infinite;
animation-delay: 11040ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 1;
overflow: hidden;
}
@keyframes s276 {
0% {
top: -100px;
left: 969px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 952px;
transform: rotateZ(786deg);
}
}
.flake:nth-child(277) {
animation: s277 4s linear infinite;
animation-delay: 11080ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.79;
overflow: hidden;
}
@keyframes s277 {
0% {
top: -100px;
left: 498px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 434px;
transform: rotateZ(580deg);
}
}
.flake:nth-child(278) {
animation: s278 5s linear infinite;
animation-delay: 11120ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.87;
overflow: hidden;
}
@keyframes s278 {
0% {
top: -100px;
left: 1011px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1026px;
transform: rotateZ(163deg);
}
}
.flake:nth-child(279) {
animation: s279 3s linear infinite;
animation-delay: 11160ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.02;
overflow: hidden;
}
@keyframes s279 {
0% {
top: -100px;
left: 108px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 99px;
transform: rotateZ(674deg);
}
}
.flake:nth-child(280) {
animation: s280 9s linear infinite;
animation-delay: 11200ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.66;
overflow: hidden;
}
@keyframes s280 {
0% {
top: -100px;
left: 748px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 835px;
transform: rotateZ(568deg);
}
}
.flake:nth-child(281) {
animation: s281 8s linear infinite;
animation-delay: 11240ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.15;
overflow: hidden;
}
@keyframes s281 {
0% {
top: -100px;
left: 1328px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1393px;
transform: rotateZ(341deg);
}
}
.flake:nth-child(282) {
animation: s282 3s linear infinite;
animation-delay: 11280ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.15;
overflow: hidden;
}
@keyframes s282 {
0% {
top: -100px;
left: 1206px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1157px;
transform: rotateZ(315deg);
}
}
.flake:nth-child(283) {
animation: s283 9s linear infinite;
animation-delay: 11320ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.56;
overflow: hidden;
}
@keyframes s283 {
0% {
top: -100px;
left: 308px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 356px;
transform: rotateZ(205deg);
}
}
.flake:nth-child(284) {
animation: s284 8s linear infinite;
animation-delay: 11360ms;
width: 3px;
height: 3px;
position: absolute;
left: -80px;
opacity: 0.61;
overflow: hidden;
}
@keyframes s284 {
0% {
top: -100px;
left: 377px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 348px;
transform: rotateZ(80deg);
}
}
.flake:nth-child(285) {
animation: s285 5s linear infinite;
animation-delay: 11400ms;
width: 4px;
height: 4px;
position: absolute;
left: -80px;
opacity: 0.14;
overflow: hidden;
}
@keyframes s285 {
0% {
top: -100px;
left: 1225px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1246px;
transform: rotateZ(717deg);
}
}
.flake:nth-child(286) {
animation: s286 9s linear infinite;
animation-delay: 11440ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.99;
overflow: hidden;
}
@keyframes s286 {
0% {
top: -100px;
left: 652px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 713px;
transform: rotateZ(49deg);
}
}
.flake:nth-child(287) {
animation: s287 3s linear infinite;
animation-delay: 11480ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.57;
overflow: hidden;
}
@keyframes s287 {
0% {
top: -100px;
left: 395px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 466px;
transform: rotateZ(605deg);
}
}
.flake:nth-child(288) {
animation: s288 6s linear infinite;
animation-delay: 11520ms;
width: 3px;
height: 3px;
position: absolute;
left: -80px;
opacity: 0.72;
overflow: hidden;
}
@keyframes s288 {
0% {
top: -100px;
left: 565px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 504px;
transform: rotateZ(581deg);
}
}
.flake:nth-child(289) {
animation: s289 4s linear infinite;
animation-delay: 11560ms;
width: 5px;
height: 5px;
position: absolute;
left: -80px;
opacity: 0.37;
overflow: hidden;
}
@keyframes s289 {
0% {
top: -100px;
left: 213px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 223px;
transform: rotateZ(628deg);
}
}
.flake:nth-child(290) {
animation: s290 4s linear infinite;
animation-delay: 11600ms;
width: 2px;
height: 2px;
position: absolute;
left: -80px;
opacity: 0.27;
overflow: hidden;
}
@keyframes s290 {
0% {
top: -100px;
left: 1182px;
transform: rotateZ(0deg);
}
100% {
top: 260px;
left: 1277px;
transform: rotateZ(329deg);
}
}
.moon {
position: absolute;
top: 260px;
right: 130px;
width: 18px;
height: 18px;
border-radius: 50%;
background-color: #eef;
box-shadow: 0px 0px 38px 19px #bbd;
opacity: 1;
animation: moon 22s ease;
animation-fill-mode: forwards;
z-index: 4;
}
@keyframes moon {
0% {
transform: scale(2);
top: 300px;
box-shadow: 0px 0px 68px 19px #bbd;
}
100% {
transform: scale(1);
top: 60px;
box-shadow: 0px 0px 38px 9px #bbd;
}
}
/* Requires font-awesome */
.player {
box-sizing: border-box;
-moz-box-sizing: border-box;
width: 210px;
height: 100px;
background: ##;
border-radius: 10px;
padding: 10px;
font-size: 16px;
color: #FFCC00;
font-family: arial, sans-serif;
}
.player .source-ctrl-container {
height: 50px;
width: 50px;
background: ##;
border-radius: 50%;
float: left;
position: relative; cursor: pointer;
color: #FF0000;}
.player .volume-ctrl-container {
box-sizing: border-box;
-moz-box-sizing: border-box;
padding-top: 10px;
height: 50px;
width: 118px;
float: right;
}
.player .fa-pause {
position: absolute;
top: 18px;
left: 18px;
}
.player .fa-play {
position: absolute;
top: 18px;
left: 20px;
}.player .time-info {
clear: both;
position: relative;
top: 8px;
text-align: center;
font-size: 13px;
}
.player .time-current {
color: #8A2BE2;
}
.player .volume-slider {
display: inline-block;
height: 2px;
width: 50px;
background: #8A2BE2;
margin: 0 10px;
position: relative;
top: -10px;
}.player .volume-knob {
background: #0033CC;
width: 13px;
height: 13px;
border-radius: 50%;
position: relative;
top: -6px;
}/*end*/
<div id="container"> <img class="sky" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg3UxjNlN-Y8XDsgMkyssn-8t_ncqrSHjANLhZKUrTaZrY7jaKU1uItZaAwjs9hU4Ne1ZSiyWvF0_CW7UIz3s8dSz7DJwVY2apzkuxKwUpBsfoVN0w-8lmPmOdEncqdBSc-vdEsWBSIqI2/s1600-r/Xmast-mys2010.jpg" />
<div class="moon"> </div>
<img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> <img class="flake" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/flake.png" /> </div>
<!-- GRADIEND --> <div class="ap" id="ap"> <div align="center"> <audio id="player"> <source src="https://sites.google.com/site/gg1cover/music/Tuhan-yang-Mys2010s.mp3" type="audio/mpeg"> </audio> <header> <div align="center"> <a href="http://demoshow-mys2010.blogspot.co.id/2016/04/meskipun-di-dalam-lembah.html" title="Tukar Gambar"><font size="1" color="green"face="arial"><b>EXCHANGE PICTURES</b></a> </div> </header>
<link rel='stylesheet prefetch' href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css'>
<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'></script><script src='//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js'></script><script src='http://cdnjs.cloudflare.com/ajax/libs/mootools-more/1.4.0.1/mootools-more-yui-compressed.js'></script>
<script>
/**
* Requires mootools core and mootools more Slider
*/
var Player = function(audio_element, options) {
this.audio_obj = document.id(audio_element);
this.options = options;
this.init = function() {
this.status = 'pause';
//this.duration = this.audio_obj.duration;
this.time = '00';
this.render();
this.addEvents();
};
this.render = function() {
// source controller
this.source_ctrl_el = new Element('div.source-ctrl.fa.fa-play');
this.source_ctrl_button = new Element('div.source-ctrl-container')
.adopt(this.source_ctrl_el);
// time info
this.time_current_el = new Element('span.time-current');
this.time_duration_el = new Element('span.time-duration');
var time_info = new Element('div.time-info')
.adopt(
this.time_current_el,
new Element('span.time-current-duration-separator').set('text', ' / '),
this.time_duration_el
);
// volume ctrl
this.volume_slider = new Element('div.volume-slider');
this.volume_ctrl = new Element('div.volume-ctrl')
.adopt(
new Element('span.fa.fa-2x.fa-volume-off'),
this.volume_slider.adopt( new Element('div.volume-knob')),
new Element('span.fa.fa-2x.fa-volume-up')
);
var container = new Element('div.player')
.adopt(
this.source_ctrl_button,
new Element('div.volume-ctrl-container').adopt(this.volume_ctrl),
time_info
)
.inject(this.audio_obj, 'after');
};
this.addEvents = function() {
this.audio_obj.load();
this.audio_obj.addEventListener('loadeddata', function() {
this.time_duration_el.set('text', this.toHHMMSS(this.audio_obj.duration));
this.time_current_el.set('text', this.toHHMMSS(this.audio_obj.currentTime));
}.bind(this));
this.source_ctrl_button.addEvent('click', this.sourceCtrlAction.bind(this));
new Slider(this.volume_slider, this.volume_slider.getElement('.volume-knob'), {
range: [0, 100],
initialStep: this.audio_obj.volume * 100,
onChange: function(value){
this.audio_obj.volume = value/100;
}.bind(this)
});
};
this.sourceCtrlAction = function() {
if(this.status == 'pause') {
this.play();
}
else {
this.pause();
}
};
this.toHHMMSS = function(s) {
var sec_num = parseInt(s, 10);
var hours = Math.floor(sec_num / 3600);
var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
var seconds = sec_num - (hours * 3600) - (minutes * 60);
if(hours < 10) { hours = "0" + hours; }
if(minutes < 10) { minutes = "0" + minutes; }
if(seconds < 10) { seconds = "0" + seconds; }
var time = (hours == '00' ? '' : hours + ':') + minutes + ':' + seconds;
return time;
}
this.play = function() {
this.time_current_el.set('text', this.toHHMMSS(this.audio_obj.currentTime));
this.time_ti = setInterval(function() {
this.time_current_el.set('text', this.toHHMMSS(this.audio_obj.currentTime));
}.bind(this), 1000);
this.source_ctrl_el.removeClass('fa-play').addClass('fa-pause');
this.audio_obj.play();
this.status = 'play';
};
this.pause = function() {
clearInterval(this.time_ti);
this.source_ctrl_el.removeClass('fa-pause').addClass('fa-play');
this.audio_obj.pause();
this.status = 'pause';
};
}
var player = new Player('player');
player.init();
</script>
If you want to directly copy and paste you canDownload Here Christmas with audio
