-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathsplash-screen.css
172 lines (164 loc) · 6.45 KB
/
splash-screen.css
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
159
160
161
162
163
164
165
166
167
168
169
170
171
172
@import url('/common/push-button.css');
:host {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
#continue-button {
position: absolute;
right: 1rem;
bottom: 1rem;
width: 4rem;
height: 4rem;
border-radius: 1rem;
background-size: 70%;
background-image: url('data:image/svg+xml,\
<svg viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg">\
<path fill="black" d="M0.1,0 v1 L0.9,0.5"/>\
</svg>\
');
}
.inner-container {
position: relative;
width: 50vmin;
height: 30vmin;
display: flex;
justify-content: center;
align-items: center;
}
:host(.finished) .inner-container {
animation: 2s fade-out forwards;
}
@keyframes fade-out {
from { opacity: 1; }
to { opacity: 0; }
}
.white-box {
position: absolute;
background: white;
animation: 3s reveal-white-box forwards;
}
@keyframes reveal-white-box {
0% { opacity: 1; width: 0; height: 0; }
20% { opacity: 1; width: 1vmin; height: 1vmin; }
40% { opacity: 0; }
60% { opacity: 1; }
75% { opacity: 0; }
80% { opacity: 1; width: 1vmin; height: 1vmin; }
85% { width: 100%; height: 1vmin; }
100% { width: 100%; height: 100%; }
}
.phones {
position: absolute;
top: calc(100% - 4vmin);
left: 5%;
right: 5%;
height: 50vh;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
}
.phone {
width: 8vmin;
height: 14vmin;
border-radius: 1.5vmin;
opacity: 0;
transform: translateY(25vmin);
animation: 1s reveal-splash-phone forwards;
}
.phone:nth-child(1) { background: #f5a500; animation-delay: 3.2s; }
.phone:nth-child(2) { background: #0cb90c; animation-delay: 3.4s; }
.phone:nth-child(3) { background: #c900e0; animation-delay: 3.6s; }
.phone:nth-child(4) { background: #00a7e0; animation-delay: 3.8s; }
@keyframes reveal-splash-phone {
from { transform: translateY(25vmin); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.bubbles {
position: absolute;
left: 14%;
right: 14%;
top: 50%;
bottom: 10%;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
}
.bubble {
width: 7vmin;
height: 7vmin;
border-radius: 50%;
transform: scale(0);
animation: 0.5s bubble-pop-in forwards;
}
.bubble:nth-child(1) { background: #f5a500; animation-delay: 4.4s; }
.bubble:nth-child(2) { background: #0cb90c; animation-delay: 4.6s; }
.bubble:nth-child(3) { background: #c900e0; animation-delay: 4.8s; }
.bubble:nth-child(4) { background: #00a7e0; animation-delay: 5.0s; }
@keyframes bubble-pop-in {
0% { transform: scale(0); }
30% { transform: scale(1.2); }
55% { transform: scale(0.9); }
75% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.phoneparty-text {
position: absolute;
bottom: 100%;
right: -4%;
width: 40%;
height: 40%;
background: no-repeat bottom / contain url('data:image/svg+xml,\
<svg viewBox="0 0 16.93 9.53" xmlns="http://www.w3.org/2000/svg">\
<path fill="white" d="M3.62.19v4.17h.82v-1.4c0-.33.05-.57.14-.74.1-.17.26-.26.5-.26.33 0\
.5.22.5.65v1.75h.8V2.41c0-.39-.09-.67-.29-.84-.2-.17-.45-.26-.78-.26-.18 0-.35.03-.5.1a.85.85\
0 0 0-.36.34H4.4a4.3 4.3 0 0 0 .04-.71V.19h-.82zM1.82 1.3a.95.95 0 0 0-.86.44H.93L.8\
1.36H.15v4.32h.81v-1.2c0-.15-.01-.3-.04-.45h.04a1 1 0 0 0 .83.38c.34 0 .62-.12.83-.39.22-.27.33-.65.33-1.16\
0-.51-.1-.9-.32-1.16a1 1 0 0 0-.82-.4zm6.69 0c-.45 0-.81.13-1.07.4s-.4.65-.4 1.15c0\
.33.07.61.2.85.12.23.29.4.5.53.23.12.47.18.75.18.45 0 .8-.14 1.07-.4.26-.28.4-.66.4-1.16\
0-.34-.07-.62-.2-.84-.12-.23-.29-.4-.5-.53a1.5 1.5 0 0 0-.75-.18zm3.82 0c-.19 0-.36.03-.53.1a.83.83\
0 0 0-.4.34h-.04l-.1-.39h-.63v3h.82v-1.4c0-.33.04-.57.13-.74.1-.17.27-.26.51-.26.17 0\
.3.06.37.17.08.1.12.26.12.48v1.75h.82V2.41c0-.39-.1-.67-.3-.84-.19-.17-.45-.26-.77-.26zm3.14 0c-.28\
0-.53.06-.74.17-.21.12-.38.3-.5.53-.12.23-.17.52-.17.87s.06.63.2.86c.13.23.3.4.54.51.23.11.5.17.8.17.22\
0 .42-.02.58-.06.17-.03.32-.08.47-.16v-.63a2.34 2.34 0 0 1-1.02.24.73.73 0 0 1-.54-.2.78.78 0 0\
1-.2-.54h1.93v-.4c0-.44-.12-.77-.36-1a1.34 1.34 0 0 0-.99-.36zm0 .58c.2 0\
.34.06.44.18.09.12.14.27.14.45H14.9c.02-.21.08-.37.18-.48.1-.1.24-.15.4-.15zm-13.92.07c.37 0 .56.3.56.89\
0 .29-.04.51-.14.67a.44.44 0 0 1-.4.23c-.23 0-.4-.07-.48-.23a1.44 1.44 0 0\
1-.13-.67v-.09c.01-.27.06-.47.14-.6.09-.13.24-.2.45-.2zm6.95 0c.22 0 .38.08.47.23.1.15.15.37.15.67 0\
.3-.05.52-.15.67-.1.15-.25.23-.47.23-.22 0-.38-.08-.47-.23a1.3 1.3 0 0\
1-.15-.67c0-.3.05-.52.15-.67.1-.15.25-.22.47-.22zm3.69 2.67l-.24.63-.45.28v.34h.39v1.45c0\
.25.04.45.12.6.08.14.2.24.33.3.15.06.3.09.49.09.15 0\
.3-.01.42-.04.13-.03.24-.06.33-.1v-.6l-.25.06c-.09.02-.17.03-.27.03s-.19-.03-.25-.09c-.07-.05-.1-.14-.1-.25V5.88h.84v-.61h-.84v-.64h-.52zm-4.97.58a2.62\
2.62 0 0 0-1.15.27l.27.55.42-.15c.14-.05.28-.07.43-.07.14 0 .26.04.34.11.08.07.12.19.12.35v.13l-.52.01c-.44.02-.78.1-1 .26-.23.15-.34.38-.34.7\
0 .32.1.56.27.72.17.15.4.23.66.23.25 0 .45-.04.59-.11.14-.07.28-.19.4-.35h.03l.16.4h.57v-2c0-.35-.11-.62-.33-.79-.2-.18-.52-.26-.92-.26zm3.76\
0a.9.9 0 0 0-.53.17c-.15.1-.27.24-.36.4h-.04l-.12-.51H9.3v3h.82V6.73c0-.2.03-.34.11-.45a.67.67 0 0 1 .31-.24A1.07 1.07 0 0 1 11.2\
6l.06-.77-.13-.01h-.15zm-6.8 0a.95.95 0 0 0-.85.45H3.3l-.11-.4H2.5v4.32h.82v-1.2c0-.14-.01-.29-.04-.44h.04c.08.1.19.18.32.27a1 1 0\
0 0 .51.11c.34 0 .61-.13.83-.4.22-.26.32-.65.32-1.16 0-.5-.1-.9-.3-1.15a1 1 0 0 0-.83-.4zm9.58.06l1.19 2.97-.05.15a.92.92 0 0\
1-.23.37c-.1.11-.23.16-.4.16a1.53 1.53 0 0 1-.33-.03v.65l.18.03.24.01c.29 0 .54-.08.75-.23.22-.16.39-.39.5-.7l1.27-3.38H16l-.55\
1.68c-.03.08-.05.17-.12.17-.06 0-.08-.09-.11-.17l-.57-1.68h-.9zm-9.84.6c.37 0 .56.29.56.88 0 .3-.05.52-.14.68a.44.44 0 0\
1-.4.23c-.24 0-.4-.08-.48-.23a1.45 1.45 0 0 1-.13-.67v-.1c.01-.26.06-.47.14-.6.09-.13.24-.2.45-.2zm3.73 1v.25c0 .2-.06.34-.18.45a.66.66\
0 0 1-.44.15.49.49 0 0 1-.29-.07c-.07-.06-.1-.15-.1-.27 0-.15.04-.26.15-.35.1-.09.28-.14.55-.14l.31-.01z"/>\
</svg>\
');
}
.phoneparty-text:after {
content: '';
position: absolute;
width: 200%;
top: -5%;
height: 110%;
background: linear-gradient(to right, rgb(0,0,0,0), rgb(0,0,0,1), rgb(0,0,0,1));
transform: translateX(-49%);
animation: 3.5s 5.5s reveal-phoneparty-text forwards;
}
@keyframes reveal-phoneparty-text {
from { transform: translateX(-50%); }
to { transform: translateX(50%); }
}