-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
106 lines (89 loc) · 3.05 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HourGlass</title>
<style>
svg {
max-width: 200px; }
.st2 {
fill: #3d9ae2; }
.st4 {
fill: none;
stroke: #ff9811;
stroke-width: 1;
stroke-miterlimit: 5; }
#stream-line {
animation: disappear 9s 0.5s linear forwards;
transform: translateY(-1px); }
#stream {
animation: shift 0.2s linear infinite; }
#sand-up {
transform: translateY(0px);
animation: drainSand 10s ease-in-out forwards; }
#sand-down {
transform: translateY(0px);
animation: fillSand 10s ease-in-out forwards; }
@keyframes shift {
0% {
transform: translateY(-1px); }
100% {
transform: translateY(0px); } }
@keyframes disappear {
0% {
transform: translateY(0px); }
97% {
transform: translateY(0px); }
99% {
transform: translateY(4.5px); }
100% {
transform: scaleY(0); } }
@keyframes fillSand {
to {
transform: translateY(-22px); } }
@keyframes drainSand {
to {
transform: translateY(23px); } }
</style>
<!-- <link rel="stylesheet" href="./dist/css/style.css"> -->
</head>
<body>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0"
y="0" viewBox="0 0 100 100" xml:space="preserve">
<path id="body"
d="M69.2 61.9c-5.6-6.7-14.5-10.2-14-14.6.8-3.9 8.8-7.4 13.9-13.5 5.7-6.8 4.7-15.5 4.3-17.6H26.3S24 26.6 30.5 34.3c5.6 6.7 14.5 10.2 14 14.6-.8 3.9-8.8 7.4-13.9 13.5-5.7 6.8-4.7 15.5-4.3 17.6h47.2c-.1 0 2.2-10.4-4.3-18.1z"
fill="#f5f5f5" />
<path id="stand-down" class="st2"
d="M76.5 16H23.1c-2.8 0-5.2-2.3-5.2-5.2 0-2.8 2.3-5.2 5.2-5.2h53.4c2.8 0 5.2 2.3 5.2 5.2 0 2.9-2.3 5.2-5.2 5.2z" />
<path id="stand-top" class="st2"
d="M76.5 90.3H23.1c-2.8 0-5.2-2.3-5.2-5.2 0-2.8 2.3-5.2 5.2-5.2h53.4c2.8 0 5.2 2.3 5.2 5.2 0 2.9-2.3 5.2-5.2 5.2z" />
<g id="up">
<defs>
<path id="cp-up"
d="M32.8 27.8c2.3 6.1 16.6 16 17.1 17.8.5-1.7 14.8-11.7 17.1-17.8 1.9-5-4.3-4.3-4.3-4.3H37.1s-6.2-.7-4.3 4.3z" />
</defs>
<clipPath id="clippathup">
<use xlink:href="#cp-up" overflow="hidden" />
</clipPath>
</g>
<g id="sand-container-up" clip-path="url(#clippathup)">
<path id="sand-up" fill="#ff9811" d="M32 23h36v23H32z" />
</g>
<g id="down">
<defs>
<path id="cp-down"
d="M66.9 70.5c-2.3-6.1-16.6-16-17.1-17.8-.5 1.7-14.8 11.7-17.1 17.8-1.9 5 4.3 4.3 4.3 4.3h25.6s6.2.7 4.3-4.3z" />
</defs>
<clipPath id="clippathdown">
<use xlink:href="#cp-down" />
</clipPath>
</g>
<g id="sand-container-down" clip-path="url(#clippathdown)">
<path id="sand-down" fill="#ff9811" d="M32.4 75h34.8v21.8H32.4z" />
</g>
<g id="stream">
<path class="st4" id="stream-line" stroke-width="1" x stroke-dasharray="3,3" d="M49.8 49.3v20.8">
</g>
</svg>
</body>
</html>