Skip to content

Commit 7d8b57e

Browse files
MeFoDyMeFoDy
committed
Add Layers talk
1 parent 700a09b commit 7d8b57e

34 files changed

+1942
-0
lines changed

‎layers/demo/cheesecake/index.html

+308
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,308 @@
1+
<div class="cheesecake">
2+
<div class="cheesecake__bottom"></div>
3+
<div class="cheesecake__middle"></div>
4+
<div class="cheesecake__top"></div>
5+
<div class="cheesecake__berries">
6+
<div class="berry"></div>
7+
<div class="berry"></div>
8+
<div class="berry"></div>
9+
<div class="berry"></div>
10+
<div class="berry"></div>
11+
<div class="berry"></div>
12+
<div class="berry"></div>
13+
<div class="berry"></div>
14+
<div class="berry"></div>
15+
</div>
16+
</div>
17+
<style>
18+
*,
19+
*::before,
20+
*::after {
21+
box-sizing: border-box;
22+
}
23+
24+
*::before,
25+
*::after {
26+
content: "";
27+
display: block;
28+
position: absolute;
29+
}
30+
31+
body {
32+
background-color: #FCA4A6;
33+
min-height: 100vh;
34+
width: 100vw;
35+
margin: 0;
36+
padding: 0;
37+
}
38+
39+
.berry {
40+
width: 5vmin;
41+
height: 5vmin;
42+
border-radius: 100%;
43+
background: radial-gradient(#6C6F9E 0, #6C6F9E 70%, transparent 70%) no-repeat 30% 40%/30% 30%, radial-gradient(#3D4F76 0, #3D4F76 70%, transparent 70%) no-repeat 30% 40%/70% 70%, #314074;
44+
}
45+
46+
.berry:nth-child(1) {
47+
position: absolute;
48+
top: 5%;
49+
left: auto;
50+
bottom: auto;
51+
right: 15%;
52+
}
53+
54+
.berry:nth-child(2) {
55+
position: absolute;
56+
top: 50%;
57+
left: auto;
58+
bottom: auto;
59+
right: 5%;
60+
}
61+
62+
.berry:nth-child(3) {
63+
position: absolute;
64+
top: 40%;
65+
left: auto;
66+
bottom: auto;
67+
right: 20%;
68+
}
69+
70+
.berry:nth-child(4) {
71+
position: absolute;
72+
top: 25%;
73+
left: auto;
74+
bottom: auto;
75+
right: 30%;
76+
}
77+
78+
.berry:nth-child(5) {
79+
position: absolute;
80+
top: 55%;
81+
left: auto;
82+
bottom: auto;
83+
right: 35%;
84+
}
85+
86+
.berry:nth-child(6) {
87+
position: absolute;
88+
top: 37%;
89+
left: auto;
90+
bottom: auto;
91+
right: 43%;
92+
}
93+
94+
.berry:nth-child(7) {
95+
position: absolute;
96+
top: 60%;
97+
left: auto;
98+
bottom: auto;
99+
right: 53%;
100+
}
101+
102+
.berry:nth-child(8) {
103+
position: absolute;
104+
top: 65%;
105+
left: auto;
106+
bottom: auto;
107+
right: 64%;
108+
}
109+
110+
.berry:nth-child(9) {
111+
position: absolute;
112+
top: 65%;
113+
left: auto;
114+
bottom: auto;
115+
right: 15%;
116+
}
117+
118+
@-webkit-keyframes split-middle {
119+
120+
0%,
121+
20%,
122+
80%,
123+
100% {
124+
transform: translatey(0);
125+
}
126+
127+
30%,
128+
70% {
129+
transform: translatey(-50%);
130+
}
131+
}
132+
133+
@keyframes split-middle {
134+
135+
0%,
136+
20%,
137+
80%,
138+
100% {
139+
transform: translatey(0);
140+
}
141+
142+
30%,
143+
70% {
144+
transform: translatey(-50%);
145+
}
146+
}
147+
148+
@-webkit-keyframes split-top {
149+
150+
0%,
151+
20%,
152+
80%,
153+
100% {
154+
transform: translatey(0);
155+
}
156+
157+
30%,
158+
70% {
159+
transform: translatey(-1000%);
160+
}
161+
}
162+
163+
@keyframes split-top {
164+
165+
0%,
166+
20%,
167+
80%,
168+
100% {
169+
transform: translatey(0);
170+
}
171+
172+
30%,
173+
70% {
174+
transform: translatey(-1000%);
175+
}
176+
}
177+
178+
@-webkit-keyframes split-berries {
179+
180+
0%,
181+
20%,
182+
80%,
183+
100% {
184+
transform: translatey(0);
185+
}
186+
187+
30%,
188+
70% {
189+
transform: translatey(-140%);
190+
}
191+
}
192+
193+
@keyframes split-berries {
194+
195+
0%,
196+
20%,
197+
80%,
198+
100% {
199+
transform: translatey(0);
200+
}
201+
202+
30%,
203+
70% {
204+
transform: translatey(-140%);
205+
}
206+
}
207+
208+
.cheesecake {
209+
width: 70vmin;
210+
height: 70vmin;
211+
position: absolute;
212+
left: 50%;
213+
top: 50%;
214+
transform: translate(-50%, -50%);
215+
overflow: hidden;
216+
}
217+
218+
.cheesecake__berries {
219+
width: 100%;
220+
height: 25%;
221+
position: absolute;
222+
top: auto;
223+
left: auto;
224+
bottom: 39%;
225+
right: auto;
226+
-webkit-animation: split-berries 5s infinite;
227+
animation: split-berries 5s infinite;
228+
}
229+
230+
.cheesecake__top {
231+
width: 100%;
232+
height: 2.55%;
233+
position: absolute;
234+
top: auto;
235+
left: auto;
236+
bottom: 35%;
237+
right: auto;
238+
background: #393140;
239+
-webkit-animation: split-top 5s infinite;
240+
animation: split-top 5s infinite;
241+
}
242+
243+
.cheesecake__top::before {
244+
width: 200%;
245+
height: 2800%;
246+
position: absolute;
247+
top: auto;
248+
left: -100%;
249+
bottom: -1300%;
250+
right: auto;
251+
border-radius: 35vmin;
252+
background: #4A4050;
253+
-webkit-clip-path: polygon(50% 50%, 100% 50%, 100% 0);
254+
clip-path: polygon(50% 50%, 100% 50%, 100% 0);
255+
}
256+
257+
.cheesecake__middle {
258+
width: 100%;
259+
height: 30%;
260+
position: absolute;
261+
top: auto;
262+
left: auto;
263+
bottom: 5%;
264+
right: auto;
265+
background: #F5DB8C;
266+
-webkit-animation: split-middle 5s infinite;
267+
animation: split-middle 5s infinite;
268+
}
269+
270+
.cheesecake__middle::before {
271+
width: 200%;
272+
height: 200%;
273+
position: absolute;
274+
top: auto;
275+
left: -100%;
276+
bottom: 0%;
277+
right: auto;
278+
border-radius: 35vmin;
279+
background: #F5E7BD;
280+
-webkit-clip-path: polygon(50% 50%, 100% 50%, 100% 0);
281+
clip-path: polygon(50% 50%, 100% 50%, 100% 0);
282+
}
283+
284+
.cheesecake__bottom {
285+
width: 100%;
286+
height: 5%;
287+
position: absolute;
288+
top: auto;
289+
left: auto;
290+
bottom: 0;
291+
right: auto;
292+
background: #BC7323;
293+
}
294+
295+
.cheesecake__bottom::before {
296+
width: 200%;
297+
height: 1400%;
298+
position: absolute;
299+
top: auto;
300+
left: -100%;
301+
bottom: -600%;
302+
right: auto;
303+
border-radius: 35vmin;
304+
background: #EF9F29;
305+
-webkit-clip-path: polygon(50% 50%, 100% 50%, 100% 0);
306+
clip-path: polygon(50% 50%, 100% 50%, 100% 0);
307+
}
308+
</style>

0 commit comments

Comments
 (0)