下雪效果

HTML

1 <div class="snow-container">
2   <div class="snow foreground"></div>
3   <div class="snow foreground layered"></div>
4   <div class="snow middleground"></div>
5   <div class="snow middleground layered"></div>
6   <div class="snow background"></div>
7   <div class="snow background layered"></div>
8 </div>

CSS

 1 .snow-container {
 2   position: fixed;
 3   top:0;
 4   left:0;
 5   right: 0;
 6   bottom:0;
 7   overflow: hidden;
 8   z-index: 2;
 9   pointer-events: none;
10   background-color: none;
11 }
12 
13 .snow {
14   display: block;
15   position: absolute;
16   z-index: 2;
17   top: 0;
18   right: 0;
19   bottom: 0;
20   left: 0;
21   pointer-events: none;
22   -webkit-transform: translate3d(0, -100%, 0);
23           transform: translate3d(0, -100%, 0);
24   -webkit-animation: snow linear infinite;
25           animation: snow linear infinite;
26 }
27 .snow.foreground {
28   background-image: url("https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-large-075d267ecbc42e3564c8ed43516dd557.png");
29   -webkit-animation-duration: 15s;
30           animation-duration: 15s;
31 }
32 .snow.foreground.layered {
33   -webkit-animation-delay: 7.5s;
34           animation-delay: 7.5s;
35 }
36 .snow.middleground {
37   background-image: url(https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-medium-0b8a5e0732315b68e1f54185be7a1ad9.png);
38   -webkit-animation-duration: 20s;
39           animation-duration: 20s;
40 }
41 .snow.middleground.layered {
42   -webkit-animation-delay: 10s;
43           animation-delay: 10s;
44 }
45 .snow.background {
46   background-image: url(https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-small-1ecd03b1fce08c24e064ff8c0a72c519.png);
47   -webkit-animation-duration: 30s;
48           animation-duration: 30s;
49 }
50 .snow.background.layered {
51   -webkit-animation-delay: 15s;
52           animation-delay: 15s;
53 }
54 
55 @-webkit-keyframes snow {
56   0% {
57     -webkit-transform: translate3d(0, -100%, 0);
58             transform: translate3d(0, -100%, 0);
59   }
60   100% {
61     -webkit-transform: translate3d(15%, 100%, 0);
62             transform: translate3d(15%, 100%, 0);
63   }
64 }
65 
66 @keyframes snow {
67   0% {
68     -webkit-transform: translate3d(0, -100%, 0);
69             transform: translate3d(0, -100%, 0);
70   }
71   100% {
72     -webkit-transform: translate3d(15%, 100%, 0);
73             transform: translate3d(15%, 100%, 0);
74   }
75 }

 

 

 

posted @ 2020-10-21 15:38  俩只猫  阅读(149)  评论(0)  编辑  收藏  举报