-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathrain1.html
158 lines (154 loc) · 4.3 KB
/
rain1.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>那些年下过的</title>
<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="lib/font/stylesheet.css">
<style>
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
overflow: hidden;
background: linear-gradient(to bottom, #202020, #111119)
}
.rain {
position: absolute;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
}
.rain.back-row {
display: none;
z-index: 1;
bottom: 60px;
opacity: 0.5;
}
body.back-row-toggle .rain.back-row {
display: block;
}
/**
* 雨滴容器
* 宽度为15px，高度为120px
* 0.5秒内从屏幕上方移动到屏幕90%的高度
* 模仿雨滴的下降过程
*/
.drop {
position: absolute;
bottom: 100%;
width: 15px;
height: 120px;
pointer-events: none;
animation: drop 0.5s linear infinite;
}
@keyframes drop {
0% {
transform: translateY(0vh);
}
75% {
transform: translateY(90vh);
}
100% {
transform: translateY(90vh);
}
}
/**
* 雨滴
* 宽度为1px，高度为120 * 0.6 = 72px
* 设置从上到下的渐变色，模仿雨滴划过的轨迹
* 0.5s内由不透明变为透明，模仿雨滴下落碰撞到物体之后消失的情景
*/
.stem {
width: 1px;
height: 60%;
margin-left: 7px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25));
animation: stem 0.5s linear infinite;
}
@keyframes stem {
0% {
opacity: 1;
}
65% {
opacity: 1;
}
75% {
opacity: 0;
}
100% {
opacity: 0;
}
}
/**
* 水花
* 雨滴碰撞到地面会溅起水花
* 宽度为15px，高度为10px
* 设置上边框为点状，加上设置圆角，模拟水花溅起时的弧形
* 设置动画，当雨滴下降到地面时，透明度设置为1，同时通过设置缩放
* 模拟水花放大的过程
*/
.splat {
width: 15px;
height: 10px;
border-top: 2px dotted rgba(255, 255, 255, 0.5);
border-radius: 50%;
opacity: 1;
transform: scale(0);
animation: splat 0.5s linear infinite;
/*display: none;*/
}
@keyframes splat {
0% {
opacity: 1;
transform: scale(0);
}
80% {
opacity: 1;
transform: scale(0);
}
90% {
opacity: 0.5;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(1.5);
}
}
</style>
</head>
<body>
<a class="back" href="javascript:history.go(-1);">back</a>
<div class="rain front-row"></div>
<div class="rain back-row"></div>
<script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.slim.min.js"></script>
<script>
var makeItRain = function() {
//clear out everything
$('.rain').empty();
var increment = 0;
var drops = "";
var backDrops = "";
while (increment < 100) {
//couple random numbers to use for various randomizations
//random number between 98 and 1
var randoHundo = (Math.floor(Math.random() * (98 - 1 + 1) + 1));
//random number between 5 and 2
var randoFiver = (Math.floor(Math.random() * (5 - 2 + 1) + 2));
//increment
increment += randoFiver;
//add in a new raindrop with various randomizations to certain CSS properties
drops += '<div class="drop" style="left: ' + increment + '%; bottom: ' + (randoFiver + randoFiver - 1 + 100) + '%; animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"><div class="stem" style="animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"></div><div class="splat" style="animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"></div></div>';
backDrops += '<div class="drop" style="right: ' + increment + '%; bottom: ' + (randoFiver + randoFiver - 1 + 100) + '%; animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"><div class="stem" style="animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"></div><div class="splat" style="animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"></div></div>';
}
$('.rain.front-row').append(drops);
$('.rain.back-row').append(backDrops);
}
makeItRain();
</script>
</body>
</html>