|
0
|
1 <!doctype html>
|
|
|
2 <html lang="en">
|
|
|
3 <head>
|
|
|
4 <meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
5 <script>
|
|
|
6 function resized() {
|
|
|
7 let imgs = document.querySelectorAll('img[rect]');
|
|
|
8 for( let img of imgs ) {
|
|
|
9 img.style['border-radius'] = 0.3 * img.width + 'px';
|
|
|
10 }
|
|
|
11 }
|
|
|
12 function loaded() {
|
|
|
13 resized();
|
|
|
14 let imgs = document.querySelectorAll('img');
|
|
|
15 for( let img of imgs ) {
|
|
|
16 img.style.visibility = 'visible';
|
|
|
17 img.style['animation-play-state'] = 'running';
|
|
|
18 }
|
|
|
19 }
|
|
|
20 </script>
|
|
|
21 <style>
|
|
|
22 body {
|
|
|
23 display: flex;
|
|
|
24 justify-content: center;
|
|
|
25 align-items: center;
|
|
|
26 height: 100vh;
|
|
|
27 margin: 0;
|
|
|
28 }
|
|
|
29 div {
|
|
|
30 width: 90%;
|
|
|
31 aspect-ratio: 950 / 535;
|
|
|
32 background-color: rgb(138, 127, 210);
|
|
|
33 position: relative;
|
|
|
34 }
|
|
|
35 div:hover img {
|
|
|
36 animation-play-state: paused;
|
|
|
37 }
|
|
|
38 img {
|
|
|
39 position: absolute;
|
|
|
40 top: 50%;
|
|
|
41 left: 50%;
|
|
|
42 transform: translate(-50%,-50%);
|
|
|
43 animation-duration: 7s;
|
|
|
44 animation-iteration-count: infinite;
|
|
|
45 box-shadow: 5px 5px 20px 1px rgba(0,0,0,0.5);
|
|
|
46 visibility: hidden;
|
|
|
47 animation-play-state: paused;
|
|
|
48 }
|
|
|
49 img[circle] {
|
|
|
50 border-radius: 50%;
|
|
|
51 }
|
|
|
52 img[bio] {
|
|
|
53 animation-name: bio;
|
|
|
54 width: 12%;
|
|
|
55 }
|
|
|
56 @keyframes bio {
|
|
|
57 0% {
|
|
|
58 opacity: 0;
|
|
|
59 transform: translate(-50%,-50%) scale(1);
|
|
|
60 }
|
|
|
61 15% {
|
|
|
62 opacity: 1;
|
|
|
63 transform: translate(-50%,-50%) scale(1.4375);
|
|
|
64 }
|
|
|
65 20%, 50% {
|
|
|
66 opacity: 1;
|
|
|
67 transform: translate(-50%,-50%) scale(1);
|
|
|
68 }
|
|
|
69 60% {
|
|
|
70 opacity: 1;
|
|
|
71 transform: translate(-50%,-50%) scale(1.1875);
|
|
|
72 }
|
|
|
73 65% {
|
|
|
74 opacity: 1;
|
|
|
75 transform: translate(-50%,-50%) scale(0.875);
|
|
|
76 }
|
|
|
77 70% {
|
|
|
78 opacity: 1;
|
|
|
79 transform: translate(-50%,-50%) scale(1.1875);
|
|
|
80 }
|
|
|
81 75% {
|
|
|
82 opacity: 1;
|
|
|
83 transform: translate(-50%,-50%) scale(0.875);
|
|
|
84 }
|
|
|
85 80%, 100% {
|
|
|
86 opacity: 1;
|
|
|
87 transform: translate(-50%,-50%) scale(1);
|
|
|
88 }
|
|
|
89 }
|
|
|
90 img[i1] {
|
|
|
91 animation-name: i1;
|
|
|
92 width: 14%;
|
|
|
93 }
|
|
|
94 @keyframes i1 {
|
|
|
95 0%, 28% {
|
|
|
96 opacity: 0;
|
|
|
97 top: 50%;
|
|
|
98 left: 50%;
|
|
|
99 }
|
|
|
100 38% {
|
|
|
101 opacity: 0.1;
|
|
|
102 }
|
|
|
103 48%, 78% {
|
|
|
104 opacity: 1;
|
|
|
105 top: 61%;
|
|
|
106 left: 89%;
|
|
|
107 }
|
|
|
108 85% {
|
|
|
109 opacity: 0.1;
|
|
|
110 }
|
|
|
111 90%, 100% {
|
|
|
112 opacity: 0;
|
|
|
113 top: 50%;
|
|
|
114 left: 50%;
|
|
|
115 }
|
|
|
116 }
|
|
|
117 img[i2] {
|
|
|
118 animation-name: i2;
|
|
|
119 width: 17%;
|
|
|
120 }
|
|
|
121 @keyframes i2 {
|
|
|
122 0%, 30% {
|
|
|
123 opacity: 0;
|
|
|
124 top: 50%;
|
|
|
125 left: 50%;
|
|
|
126 }
|
|
|
127 40% {
|
|
|
128 opacity: 0.1;
|
|
|
129 }
|
|
|
130 50%, 80% {
|
|
|
131 opacity: 1;
|
|
|
132 top: 74%;
|
|
|
133 left: 69%;
|
|
|
134 }
|
|
|
135 85% {
|
|
|
136 opacity: 0.1;
|
|
|
137 }
|
|
|
138 90%, 100% {
|
|
|
139 opacity: 0;
|
|
|
140 top: 50%;
|
|
|
141 left: 50%;
|
|
|
142 }
|
|
|
143 }
|
|
|
144 img[i3] {
|
|
|
145 animation-name: i3;
|
|
|
146 width: 15%;
|
|
|
147 }
|
|
|
148 @keyframes i3 {
|
|
|
149 0%, 26% {
|
|
|
150 opacity: 0;
|
|
|
151 top: 50%;
|
|
|
152 left: 50%;
|
|
|
153 }
|
|
|
154 36% {
|
|
|
155 opacity: 0.1;
|
|
|
156 }
|
|
|
157 46%, 76% {
|
|
|
158 opacity: 1;
|
|
|
159 top: 25%;
|
|
|
160 left: 75%;
|
|
|
161 }
|
|
|
162 85% {
|
|
|
163 opacity: 0.1;
|
|
|
164 }
|
|
|
165 90%, 100% {
|
|
|
166 opacity: 0;
|
|
|
167 top: 50%;
|
|
|
168 left: 50%;
|
|
|
169 }
|
|
|
170 }
|
|
|
171 img[i4] {
|
|
|
172 animation-name: i4;
|
|
|
173 width: 13%;
|
|
|
174 }
|
|
|
175 @keyframes i4 {
|
|
|
176 0%, 20% {
|
|
|
177 opacity: 0;
|
|
|
178 top: 50%;
|
|
|
179 left: 50%;
|
|
|
180 }
|
|
|
181 30% {
|
|
|
182 opacity: 0.1;
|
|
|
183 }
|
|
|
184 40%, 70% {
|
|
|
185 opacity: 1;
|
|
|
186 top: 76%;
|
|
|
187 left: 32%;
|
|
|
188 }
|
|
|
189 85% {
|
|
|
190 opacity: 0.1;
|
|
|
191 }
|
|
|
192 90%, 100% {
|
|
|
193 opacity: 0;
|
|
|
194 top: 50%;
|
|
|
195 left: 50%;
|
|
|
196 }
|
|
|
197 }
|
|
|
198 img[i5] {
|
|
|
199 animation-name: i5;
|
|
|
200 width: 16%;
|
|
|
201 }
|
|
|
202 @keyframes i5 {
|
|
|
203 0%, 22% {
|
|
|
204 opacity: 0;
|
|
|
205 top: 50%;
|
|
|
206 left: 50%;
|
|
|
207 }
|
|
|
208 32% {
|
|
|
209 opacity: 0.1;
|
|
|
210 }
|
|
|
211 42%, 72% {
|
|
|
212 opacity: 1;
|
|
|
213 top: 56%;
|
|
|
214 left: 12%;
|
|
|
215 }
|
|
|
216 85% {
|
|
|
217 opacity: 0.1;
|
|
|
218 }
|
|
|
219 90%, 100% {
|
|
|
220 opacity: 0;
|
|
|
221 top: 50%;
|
|
|
222 left: 50%;
|
|
|
223 }
|
|
|
224 }
|
|
|
225 img[i6] {
|
|
|
226 animation-name: i6;
|
|
|
227 width: 14%;
|
|
|
228 }
|
|
|
229 @keyframes i6 {
|
|
|
230 0%, 24% {
|
|
|
231 opacity: 0;
|
|
|
232 top: 50%;
|
|
|
233 left: 50%;
|
|
|
234 }
|
|
|
235 24% {
|
|
|
236 opacity: 0.1;
|
|
|
237 }
|
|
|
238 44%, 74% {
|
|
|
239 opacity: 1;
|
|
|
240 top: 20%;
|
|
|
241 left: 26%;
|
|
|
242 }
|
|
|
243 85% {
|
|
|
244 opacity: 0.1;
|
|
|
245 }
|
|
|
246 90%, 100% {
|
|
|
247 opacity: 0;
|
|
|
248 top: 50%;
|
|
|
249 left: 50%;
|
|
|
250 }
|
|
|
251 }
|
|
|
252 img[ins] {
|
|
|
253 animation-name: ins;
|
|
|
254 width: 7%;
|
|
|
255 }
|
|
|
256 @keyframes ins {
|
|
|
257 0%, 30% {
|
|
|
258 opacity: 0;
|
|
|
259 top: 50%;
|
|
|
260 left: 50%;
|
|
|
261 }
|
|
|
262 40% {
|
|
|
263 opacity: 0.1;
|
|
|
264 }
|
|
|
265 50%, 80% {
|
|
|
266 opacity: 1;
|
|
|
267 top: 25%;
|
|
|
268 left: 58%;
|
|
|
269 }
|
|
|
270 85% {
|
|
|
271 opacity: 0.1;
|
|
|
272 }
|
|
|
273 90%, 100% {
|
|
|
274 opacity: 0;
|
|
|
275 top: 50%;
|
|
|
276 left: 50%;
|
|
|
277 }
|
|
|
278 }
|
|
|
279 img[tk] {
|
|
|
280 animation-name: tk;
|
|
|
281 width: 7%;
|
|
|
282 }
|
|
|
283 @keyframes tk {
|
|
|
284 0%, 32% {
|
|
|
285 opacity: 0;
|
|
|
286 top: 50%;
|
|
|
287 left: 50%;
|
|
|
288 }
|
|
|
289 42% {
|
|
|
290 opacity: 0.1;
|
|
|
291 }
|
|
|
292 52%, 82% {
|
|
|
293 opacity: 1;
|
|
|
294 top: 45%;
|
|
|
295 left: 35%;
|
|
|
296 }
|
|
|
297 85% {
|
|
|
298 opacity: 0.1;
|
|
|
299 }
|
|
|
300 90%, 100% {
|
|
|
301 opacity: 0;
|
|
|
302 top: 50%;
|
|
|
303 left: 50%;
|
|
|
304 }
|
|
|
305 }
|
|
|
306 img[yt] {
|
|
|
307 animation-name: yt;
|
|
|
308 width: 7%;
|
|
|
309 }
|
|
|
310 @keyframes yt {
|
|
|
311 0%, 34% {
|
|
|
312 opacity: 0;
|
|
|
313 top: 50%;
|
|
|
314 left: 50%;
|
|
|
315 }
|
|
|
316 44% {
|
|
|
317 opacity: 0.1;
|
|
|
318 }
|
|
|
319 54%, 84% {
|
|
|
320 opacity: 1;
|
|
|
321 top: 23%;
|
|
|
322 left: 43%;
|
|
|
323 }
|
|
|
324 85% {
|
|
|
325 opacity: 0.1;
|
|
|
326 }
|
|
|
327 90%, 100% {
|
|
|
328 opacity: 0;
|
|
|
329 top: 50%;
|
|
|
330 left: 50%;
|
|
|
331 }
|
|
|
332 }
|
|
|
333 </style>
|
|
|
334 </head>
|
|
|
335 <body onload="loaded()" onresize="resized()">
|
|
|
336 <div>
|
|
|
337 <img bio rect src="https://test.linkmy.style/images/home/bio.png">
|
|
|
338 <img i1 rect src="https://test.linkmy.style/images/home/i1.png">
|
|
|
339 <img i2 rect src="https://test.linkmy.style/images/home/i2.png">
|
|
|
340 <img i3 rect src="https://test.linkmy.style/images/home/i3.png">
|
|
|
341 <img i4 rect src="https://test.linkmy.style/images/home/i4.png">
|
|
|
342 <img i5 rect src="https://test.linkmy.style/images/home/i5.png">
|
|
|
343 <img i6 rect src="https://test.linkmy.style/images/home/i6.png">
|
|
|
344 <img ins circle src="https://test.linkmy.style/images/home/ins.png">
|
|
|
345 <img tk circle src="https://test.linkmy.style/images/home/tk.png">
|
|
|
346 <img yt circle src="https://test.linkmy.style/images/home/yt.png">
|
|
|
347 </div>
|
|
|
348 </body>
|
|
|
349 </html>
|
