1.wrapper {
2  height: 200px;
3}
4
5.cloud {
6  overflow: hidden;
7  padding: 5px;
8  height: 50px;
9}
10
11.cloud_left {
12  position: relative;
13  float: left;
14  background-color: #234;
15  width: 100px;
16  height: 100px;
17  border-radius: 50%;
18  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.75);
19}
20
21.cloud_right {
22  position: relative;
23  float: left;
24  background-color: #203040;
25  width: 70px;
26  height: 70px;
27  border-radius: 50%;
28  top: 15px;
29  left: -30px;
30  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.75);
31}
32
33.rain {
34  width: 180px;
35  height: 140px;
36}
37
38.drop {
39  position: relative;
40  float: left;
41  width: 2px;
42  margin: 10px;
43  left: 20px;
44  background: #789;
45  box-shadow: 1px 0.5px 1px 0.5px rgba(0, 0, 0, 0.75);
46  animation: rain_401 0.8s infinite ease-out;
47}
48
49.drop:nth-child(1) {
50  height: 15px;
51  top: 5px;
52  animation-delay: -1.0s;
53}
54
55.drop:nth-child(2) {
56  height: 20px;
57  animation-delay: -1.4s;
58}
59
60.drop:nth-child(3) {
61  height: 15px;
62  top: 5px;
63  animation-delay: -1.6s;
64}
65
66.drop:nth-child(4) {
67  height: 10px;
68  top: 10px;
69  animation-delay: -1.2s;
70}
71
72.drop:nth-child(5) {
73  height: 5px;
74  top: 15px;
75  animation-delay: -1.6s;
76}
77
78@keyframes rain_401 {
79  0% {
80    opacity: 1;
81    transform: translate(0, 0);
82  }
83
84  100% {
85    opacity: 0.2;
86    transform: translate(0, 100px);
87  }
88}
89
90.surface {
91  position: relative;
92  width: 180px;
93  height: 140px;
94  top: -140px;
95}
96
97.hit {
98  position: absolute;
99  width: 3px;
100  height: 1px;
101  margin: 10px;
102  bottom: -5px;
103  border: 1px solid #456;
104  border-radius: 50%;
105  animation: hit_401 0.8s infinite ease;
106}
107
108.hit:nth-child(1) {
109  left: 19px;
110  animation-delay: -0.3s;
111}
112
113.hit:nth-child(2) {
114  left: 41px;
115  animation-delay: -0.7s;
116}
117
118.hit:nth-child(3) {
119  left: 63px;
120  animation-delay: -0.9s;
121}
122
123.hit:nth-child(4) {
124  left: 85px;
125  animation-delay: -0.5s;
126}
127
128.hit:nth-child(5) {
129  left: 107px;
130  animation-delay: -0.9s;
131}
132
133@keyframes hit_401 {
134  0% {
135    opacity: 0.75;
136    transform: scale(1);
137  }
138
139  100% {
140    opacity: 0;
141    transform: scale(2.5);
142  }
143}