snow.css - jscancer - Javascript crap (relatively small)
(HTM) git clone git://git.codemadness.org/jscancer
(DIR) Log
(DIR) Files
(DIR) Refs
(DIR) README
(DIR) LICENSE
---
snow.css (1878B)
---
1 *,*::after,*::before {
2 box-sizing: border-box;
3 -webkit-box-sizing: border-box;
4 -ms-box-sizing:border-box;
5 -moz-box-sizing: border-box;
6 }
7 body {
8 font-family: arial;
9 font-size: 16px;
10 margin: 0;
11 background: #fff;
12 color: #000;
13 }
14 .snow_wrap {
15 height: 100vh;
16 width: 100%;
17 background-size: cover;
18 background-position: center bottom;
19 position: relative;
20 overflow: hidden;
21 z-index: 999999;
22 }
23 .snow,.snow:after,.snow::before {
24 content: '';
25 position: absolute;
26 top: -650px;
27 right: 0;
28 bottom: 0;
29 left: 0;
30 background-image: radial-gradient(4px 4px at 100px 50px,#fff,transparent),
31 radial-gradient(6px 6px at 200px 150px, #fff,transparent),
32 radial-gradient(3px 3px at 300px 250px,#fff,transparent),
33 radial-gradient(4px 4px at 400px 350px,#fff,transparent),
34 radial-gradient(6px 6px at 500px 100px,#fff,transparent),
35 radial-gradient(3px 3px at 50px 200px,#fff,transparent),
36 radial-gradient(4px 4px at 150px 300px,#fff,transparent),
37 radial-gradient(6px 6px at 250px 400px,#fff,transparent),
38 radial-gradient(3px 3px at 350px 500px,#fff,transparent),
39 radial-gradient(4px 4px at 550px 550px,#fff,transparent);
40 background-size: 650px 650px;
41 animation: SnowAnim 3s linear infinite;
42 }
43 .snow:after {
44 margin-left: -250px;
45 opacity: 0.5;
46 filter: blur(2px);
47 animation-direction: reverse;
48 animation-duration: 6s;
49 }
50 .snow::before {
51 margin-left: -350px;
52 opacity: 0.7;
53 filter: blur(1px);
54 animation-direction: reverse;
55 animation-duration: 9s;
56 }
57 @keyframes SnowAnim {
58 from {
59 transform: translateY(0);
60 }
61 to {
62 transform: translateY(650px);
63 }
64 }