Favorisieren 0
Fork 0

Zuletzt aktiv 1 day ago

Hudi hat die Gist bearbeitet 1 day ago. Zu Änderung gehen

1 file changed, 754 insertions

留言界面css(Datei erstellt)

@@ -0,0 +1,754 @@
1 + .card1{
2 + width: 100%;
3 + height: 100vh;
4 + position: relative;
5 + overflow: hidden;
6 + }
7 +
8 + .cards-container {
9 + width: 100%;
10 + height: 100vh;
11 + display: flex;
12 + max-width: 500px;
13 + margin: 0 auto;
14 + position: relative;
15 + justify-content: center;
16 + align-items: center;
17 + padding: 20px;
18 + box-sizing: border-box;
19 + }
20 +
21 + .animation-wrapper {
22 + width: 100%;
23 + height: 100%;
24 + position: absolute;
25 + top: 0;
26 + left: 0;
27 + z-index: 80;
28 + }
29 +
30 + .message-container {
31 + width: 100%;
32 + max-width: 400px;
33 + }
34 +
35 + /* 动画卡片样式 */
36 + .animate-card {
37 + background: #ffffff;
38 + /*position: absolute;*/
39 + border-radius: 10px;
40 + padding: 25px;
41 + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
42 + width: 380px;
43 + box-sizing: border-box;
44 + transform-origin: center center;
45 + transition: all 0.5s ease;
46 + animation-delay: 3s;
47 + animation-duration: 1.5s;
48 + animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
49 + animation-fill-mode: forwards;
50 + /*left: 50%;*/
51 + /*top: -50%;*/
52 + /*transform: translate(-50%, -50%);*/
53 + z-index: 81;
54 + cursor: pointer;
55 + }
56 +
57 + .animate-card .fake-content {
58 + width: 100%;
59 + height: 280px;
60 + background: #f7f9fc;
61 + border-radius: 8px;
62 + padding: 20px;
63 + box-sizing: border-box;
64 + border: 1px solid rgba(226, 232, 240, 0.8);
65 + }
66 +
67 + .animate-card .fake-image {
68 + width: 80px;
69 + height: 80px;
70 + background: #edf2f7;
71 + border-radius: 50%;
72 + margin-bottom: 20px;
73 + /*border: 1px solid rgba(226, 232, 240, 0.8);*/
74 + }
75 + .animate-card .fake-image img{
76 + border-radius: 50%;
77 + border: 1px solid rgba(226, 232, 240, 0.8);
78 + }
79 + .animate-card .fake-title {
80 + background: #edf2f7;
81 + padding: 0 10px;
82 + width: 85%;
83 + margin-bottom: 20px;
84 + border-radius: 4px;
85 + border: 1px solid rgba(226, 232, 240, 0.8);
86 + }
87 +
88 + .animate-card .fake-line {
89 + padding: 0 10px;
90 + background: #edf2f7;
91 + margin-bottom: 12px;
92 + border-radius: 3px;
93 + border: 1px solid rgba(226, 232, 240, 0.8);
94 + display: -webkit-box;
95 + -webkit-box-orient: vertical;
96 + -webkit-line-clamp: 2;
97 + overflow: hidden;
98 + text-overflow: ellipsis;
99 + }
100 +
101 + .animate-card .fake-line:nth-child(1) { width: 100%; }
102 + .animate-card .fake-line:nth-child(2) { width: 85%; }
103 + /*.animate-card .fake-line:nth-child(3) { width: 70%;height: 16px }*/
104 +
105 + .animate-card.animated {
106 + cursor: pointer;
107 + }
108 +
109 + .animate-card.animated:hover {
110 + transform: scale(1.2) !important;
111 + box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
112 + z-index: 89;
113 + }
114 +
115 + .animate-card.stacked {
116 + position: absolute;
117 + top: 100%;
118 + left: 50%;
119 + transform: translate(-50%, -50%) rotate(0) scale(0.95);
120 + opacity: 0.8;
121 + transition: all 0.3s ease;
122 + }
123 +
124 + /* 修改动画结束后的样式 */
125 + .animation-ended {
126 + position: fixed;
127 + opacity: 1;
128 + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
129 + background: white;
130 + border-radius: 10px;
131 + width: 200px;
132 + pointer-events: none;
133 + transition: all 0.5s ease;
134 + }
135 +
136 + .animation-ended .fake-content {
137 + transform: scale(1);
138 + }
139 +
140 + /* 移动端适配 */
141 + @media screen and (max-width: 768px) {
142 + .animation-wrapper {
143 + display: none; /* 隐藏动画卡片容器 */
144 + }
145 +
146 + .card {
147 + width: 100%;
148 + padding: 0;
149 + }
150 +
151 + .cards-container {
152 + max-width: 100%;
153 + padding: 10px;
154 + margin: 0;
155 + width: 100%;
156 + box-sizing: border-box;
157 + }
158 +
159 + .final-card {
160 + opacity: 1;
161 + animation: mobileCardEnter 0.6s ease-out;
162 + width: 100%;
163 + padding: 0;
164 + }
165 +
166 + .final-card .message-card {
167 + max-width: 100%;
168 + margin: 0;
169 + padding: 15px;
170 + border-radius: 8px;
171 + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
172 + box-sizing: border-box;
173 + }
174 +
175 + .final-card .avatar img {
176 + max-height: 30vh;
177 + width: 100%;
178 + object-fit: cover;
179 + margin-bottom: 12px;
180 + animation: contentFadeIn 0.8s ease-out;
181 + animation-fill-mode: both;
182 + }
183 +
184 + .final-card .message-header {
185 + font-size: 1.1em;
186 + padding: 12px 0;
187 + margin-bottom: 15px;
188 + animation: contentFadeIn 0.8s ease-out 0.2s;
189 + animation-fill-mode: both;
190 + }
191 +
192 + .final-card .message-questions {
193 + padding: 15px;
194 + margin: 12px 0;
195 + background: #f8faff;
196 + border-radius: 8px;
197 + animation: contentFadeIn 0.8s ease-out 0.4s;
198 + animation-fill-mode: both;
199 + }
200 +
201 + .final-card .message-footer {
202 + padding: 12px;
203 + margin-top: 20px;
204 + background: linear-gradient(to right, #f8faff, #fff, #f8faff);
205 + border-radius: 8px;
206 + animation: contentFadeIn 0.8s ease-out 0.6s;
207 + animation-fill-mode: both;
208 + }
209 +
210 + /* 移除PC端的动画延迟 */
211 + .final-card {
212 + animation-delay: 0s !important;
213 + }
214 + }
215 +
216 + /* 移动端的卡片动画 */
217 + @keyframes mobileCardEnter {
218 + 0% {
219 + opacity: 0;
220 + transform: translateY(20px);
221 + }
222 + 100% {
223 + opacity: 1;
224 + transform: translateY(0);
225 + }
226 + }
227 +
228 + @keyframes contentFadeIn {
229 + 0% {
230 + opacity: 0;
231 + transform: translateY(10px);
232 + }
233 + 100% {
234 + opacity: 1;
235 + transform: translateY(0);
236 + }
237 + }
238 +
239 + /* 最终显示的卡片 */
240 + .final-card {
241 + opacity: 0;
242 + transform: scale(0.8);
243 + animation: showFinalCard 0.5s ease forwards;
244 + animation-delay: 2s;
245 + position: relative;
246 + z-index: 81; /* 确保最终卡片在最上层 */
247 + }
248 +
249 + .final-card .message-card {
250 + background: linear-gradient(135deg, #ffffff 0%, #f8faff 100%);
251 + -webkit-backdrop-filter: blur(10px);
252 + backdrop-filter: blur(10px);
253 + border: 1px solid rgba(255, 255, 255, 0.3);
254 + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
255 + padding: 25px;
256 + border-radius: 10px;
257 + position: relative;
258 + /* z-index: 1000; */
259 + text-align: center;
260 + transition: all 0.3s ease;
261 + }
262 +
263 + .final-card .message-card:hover {
264 + transform: scale(1.02);
265 + box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
266 + }
267 +
268 + @media (hover: hover) {
269 + .final-card .message-card:hover {
270 + transform: scale(1.02);
271 + box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
272 + }
273 + }
274 +
275 + @media (hover: none) {
276 + .final-card .message-card:hover {
277 + transform: none;
278 + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
279 + }
280 + }
281 +
282 + .final-card .avatar img {
283 + width: 60px;
284 + height: 60px;
285 + border-radius: 50%;
286 + margin-right: 15px;
287 + transition: transform 0.3s ease;
288 + }
289 +
290 + .final-card .message-header {
291 + color: var(--text-color);
292 + font-size: 1.2em;
293 + padding: 15px 0;
294 + border-bottom: 2px solid #e1e8f5;
295 + margin-bottom: 20px;
296 + text-align: center;
297 + }
298 +
299 + .final-card .message-questions {
300 + background: linear-gradient(135deg, #f5f8ff 0%, #ffffff 100%);
301 + padding: 20px;
302 + border-radius: 12px;
303 + margin: 15px 0;
304 + text-align: center;
305 + }
306 +
307 + .final-card .message-questions p {
308 + color: var(--text-color);
309 + margin: 12px 0;
310 + font-size: 1em;
311 + transition: transform 0.2s ease;
312 + cursor: pointer;
313 + text-align: center;
314 + }
315 +
316 + .final-card .message-footer {
317 + background: linear-gradient(to right, #f5f8ff, #ffffff, #f5f8ff);
318 + padding: 15px;
319 + border-radius: 10px;
320 + margin-top: 25px;
321 + text-align: center;
322 + }
323 +
324 + .final-card .dots {
325 + background: linear-gradient(45deg, #3498db, #2980b9);
326 + -webkit-background-clip: text;
327 + background-clip: text;
328 + color: transparent;
329 + letter-spacing: 3px;
330 + text-align: center;
331 + }
332 +
333 + .final-card .emoji {
334 + font-size: 1.2em;
335 + display: inline-block;
336 + transition: transform 0.3s ease;
337 + }
338 +
339 + .final-card:hover .emoji {
340 + transform: scale(1.2);
341 + }
342 +
343 + .final-card .footer-text {
344 + color: var(--text-color);
345 + font-size: 0.9em;
346 + margin-top: 8px;
347 + text-align: center;
348 + }
349 +
350 + /* 悬停效果增强 */
351 + .final-card:hover .message-card {
352 + transform: translateY(-15px);
353 + box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12),
354 + 0 5px 15px rgba(0, 0, 0, 0.06);
355 + }
356 +
357 + .final-card:hover .avatar img {
358 + transform: scale(1.05);
359 + }
360 +
361 + /* 不同卡片的初始位置和动画 */
362 + .card-1 {
363 + animation: flyFromLeft 1.5s ease forwards;
364 + }
365 +
366 + .card-2 {
367 + animation: flyFromRight 1.5s ease forwards;
368 + animation-delay: 0.2s;
369 + }
370 +
371 + .card-3 {
372 + animation: flyFromTop 1.5s ease forwards;
373 + animation-delay: 0.4s;
374 + }
375 +
376 + .card-4 {
377 + animation: flyFromBottom 1.5s ease forwards;
378 + animation-delay: 0.6s;
379 + }
380 +
381 + .card-5 {
382 + animation: flyFromTopLeft 1.5s ease forwards;
383 + animation-delay: 0.8s;
384 + }
385 +
386 + .card-6 {
387 + animation: flyFromTopRight 1.5s ease forwards;
388 + animation-delay: 1s;
389 + }
390 +
391 + .card-7 {
392 + animation: flyFromBottomLeft 1.5s ease forwards;
393 + animation-delay: 1.2s;
394 + }
395 +
396 + .card-8 {
397 + animation: flyFromBottomRight 1.5s ease forwards;
398 + animation-delay: 1.4s;
399 + }
400 + .card-9 {
401 + animation: flyFromTopLeft 1.5s ease forwards;
402 + animation-delay: 1.6s;
403 + }
404 + .card-10 {
405 + animation: flyFromBottomRight 1.5s ease forwards;
406 + animation-delay: 1.8s;
407 + }
408 +
409 + /* 飞入动画 */
410 + @keyframes flyFromTopLeft {
411 + 0% {
412 + opacity: 0;
413 + transform: translate(-100vw, -100vh) rotate(-45deg);
414 + }
415 + 100% {
416 + opacity: 1;
417 + transform: translate(0, 0) rotate(0);
418 + }
419 + }
420 +
421 + @keyframes flyFromTopRight {
422 + 0% {
423 + opacity: 0;
424 + transform: translate(100vw, -100vh) rotate(45deg);
425 + }
426 + 100% {
427 + opacity: 1;
428 + transform: translate(0, 0) rotate(0);
429 + }
430 + }
431 +
432 + @keyframes flyFromBottomLeft {
433 + 0% {
434 + opacity: 0;
435 + transform: translate(-100vw, 100vh) rotate(45deg);
436 + }
437 + 100% {
438 + opacity: 1;
439 + transform: translate(0, 0) rotate(0);
440 + }
441 + }
442 +
443 + @keyframes flyFromBottomRight {
444 + 0% {
445 + opacity: 0;
446 + transform: translate(100vw, 100vh) rotate(-45deg);
447 + }
448 + 100% {
449 + opacity: 1;
450 + transform: translate(0, 0) rotate(0);
451 + }
452 + }
453 +
454 + @keyframes flyFromLeft {
455 + 0% {
456 + opacity: 0;
457 + transform: translate(-100vw, 0) rotate(-15deg);
458 + }
459 + 100% {
460 + opacity: 1;
461 + transform: translate(0, 0) rotate(0);
462 + }
463 + }
464 +
465 + @keyframes flyFromRight {
466 + 0% {
467 + opacity: 0;
468 + transform: translate(100vw, 0) rotate(15deg);
469 + }
470 + 100% {
471 + opacity: 1;
472 + transform: translate(0, 0) rotate(0);
473 + }
474 + }
475 +
476 + @keyframes flyFromTop {
477 + 0% {
478 + opacity: 0;
479 + transform: translate(0, -100vh) rotate(-15deg);
480 + }
481 + 100% {
482 + opacity: 1;
483 + transform: translate(0, 0) rotate(0);
484 + }
485 + }
486 +
487 + @keyframes flyFromBottom {
488 + 0% {
489 + opacity: 0;
490 + transform: translate(0, 100vh) rotate(15deg);
491 + }
492 + 100% {
493 + opacity: 1;
494 + transform: translate(0, 0) rotate(0);
495 + }
496 + }
497 +
498 + /* 动画关键帧 */
499 + @keyframes showFinalCard {
500 + 0% {
501 + opacity: 0;
502 + transform: scale(0.8) translateY(20px);
503 + }
504 + 100% {
505 + opacity: 1;
506 + transform: scale(1) translateY(0);
507 + }
508 + }
509 +
510 + /* 移动端适配基础设置 */
511 + @media screen and (max-width: 768px) {
512 + .cards-container {
513 + max-width: 100%;
514 + padding: 15px;
515 + height: 100vh;
516 + max-height: none;
517 + /*position: fixed;*/
518 + /*top: 0;*/
519 + /*left: 0;*/
520 + transform: none;
521 + width: 100%;
522 + }
523 +
524 + /* 调整最终卡片样式 */
525 + .message-container.final-card {
526 + margin: 10px;
527 + width: calc(100% - 10px); /* 减去左右外边距 */
528 + }
529 +
530 + .final-card .message-card {
531 + padding: 15px;
532 + max-height: calc(100vh - 100px); /* 调整最大高度，考虑外边距 */
533 + width: 100%;
534 + margin: 0 auto;
535 + }
536 +
537 + /* 调整卡片内容的间距 */
538 + .final-card .avatar {
539 + margin: -15px -15px 15px -15px; /* 让图片充满卡片宽度 */
540 + }
541 +
542 + .final-card .avatar img {
543 + max-height: 30vh;
544 + border-radius: 10px 10px 0 0; /* 只保留上方圆角 */
545 + }
546 +
547 + .final-card .message-content {
548 + padding: 0 5px; /* 内容区域添加小边距 */
549 + }
550 +
551 + .final-card .avatar img {
552 + max-height: 30vh;
553 + }
554 +
555 + .final-card .message-header {
556 + font-size: 1.1em;
557 + padding: 12px 0;
558 + }
559 +
560 + .final-card .message-questions {
561 + padding: 15px;
562 + margin: 12px 0;
563 + }
564 +
565 + .final-card .message-questions p {
566 + margin: 10px 0;
567 + font-size: 0.95em;
568 + }
569 +
570 + .final-card .message-footer {
571 + padding: 12px;
572 + margin-top: 20px;
573 + }
574 +
575 + /* 调整动画卡片尺寸 */
576 + .animate-card {
577 + width: calc(100% - 40px);
578 + padding: 20px;
579 + }
580 +
581 + .animate-card .fake-content {
582 + height: 240px;
583 + padding: 15px;
584 + }
585 +
586 + .animate-card .fake-image {
587 + width: 60px;
588 + height: 60px;
589 + margin-bottom: 15px;
590 + }
591 +
592 + .animate-card .fake-title {
593 + height: 20px;
594 + padding: 5px 10px;
595 + margin-bottom: 15px;
596 + }
597 +
598 + .animate-card .fake-line {
599 + height: 14px;
600 + margin-bottom: 10px;
601 + }
602 + /* .animate-card:hover{
603 + z-index: 1000!important;
604 + cursor: pointer!important;
605 + } */
606 +
607 + /* 调整动画距离，避免在小屏幕上飞得太远 */
608 + @keyframes flyFromLeft {
609 + 0% {
610 + opacity: 1;
611 + transform: translate(calc(-50vw - 50%), -50%) rotate(-20deg);
612 + }
613 + 80% {
614 + opacity: 1;
615 + transform: translate(-50%, -50%) rotate(0);
616 + }
617 + 100% {
618 + opacity: 0;
619 + transform: translate(calc(30px - 50%), -50%) rotate(10deg);
620 + }
621 + }
622 +
623 + @keyframes flyFromRight {
624 + 0% {
625 + opacity: 1;
626 + transform: translate(calc(50vw - 50%), -50%) rotate(20deg);
627 + }
628 + 80% {
629 + opacity: 1;
630 + transform: translate(-50%, -50%) rotate(0);
631 + }
632 + 100% {
633 + opacity: 0;
634 + transform: translate(calc(-30px - 50%), -50%) rotate(-10deg);
635 + }
636 + }
637 +
638 + @keyframes flyFromTop {
639 + 0% {
640 + opacity: 1;
641 + transform: translate(-50%, calc(-50vh - 50%)) rotate(-20deg);
642 + }
643 + 80% {
644 + opacity: 1;
645 + transform: translate(-50%, -50%) rotate(0);
646 + }
647 + 100% {
648 + opacity: 0;
649 + transform: translate(-50%, calc(30px - 50%)) rotate(10deg);
650 + }
651 + }
652 +
653 + @keyframes flyFromBottom {
654 + 0% {
655 + opacity: 1;
656 + transform: translate(-50%, calc(50vh - 50%)) rotate(20deg);
657 + }
658 + 80% {
659 + opacity: 1;
660 + transform: translate(-50%, -50%) rotate(0);
661 + }
662 + 100% {
663 + opacity: 0;
664 + transform: translate(-50%, calc(-30px - 50%)) rotate(-10deg);
665 + }
666 + }
667 +
668 + /* 对角线动画也需要调整 */
669 + @keyframes flyFromTopLeft {
670 + 0% {
671 + opacity: 1;
672 + transform: translate(calc(-50vw - 50%), calc(-50vh - 50%)) rotate(-45deg);
673 + }
674 + 80% {
675 + opacity: 1;
676 + transform: translate(-50%, -50%) rotate(0);
677 + }
678 + 100% {
679 + opacity: 0;
680 + transform: translate(calc(20px - 50%), calc(20px - 50%)) rotate(15deg);
681 + }
682 + }
683 +
684 + /* 其他对角线动画也类似调整... */
685 +
686 + /* 调整悬停效果 */
687 + .final-card:hover .message-card {
688 + transform: translateY(-10px);
689 + }
690 +
691 + .message-container:hover .message-card {
692 + transform: translateY(-10px);
693 + }
694 + }
695 +
696 + /* 移动端样式 */
697 + @media screen and (max-width: 768px) {
698 + .final-card{
699 + z-index: 1;
700 + }
701 + .final-card .message-card {
702 + background: linear-gradient(135deg, #ffffff 0%, #f8faff 100%);
703 + }
704 +
705 + .final-card .message-questions {
706 + background: linear-gradient(135deg, #f5f8ff 0%, #ffffff 100%);
707 + }
708 +
709 + .final-card .message-header {
710 + color: var(--text-color);
711 + }
712 +
713 + .final-card .message-questions p {
714 + color:var(--text-color);
715 + }
716 +
717 + .final-card .message-footer {
718 + background: linear-gradient(to right, #f5f8ff, #ffffff, #f5f8ff);
719 + }
720 + .final-card .avatar{
721 + margin-top: 10px;
722 + }
723 + }
724 +
725 + /* 特小屏幕的额外调整 */
726 + @media screen and (max-width: 320px) {
727 + .message-container.final-card {
728 + margin: 5px; /* 更小的外边距 */
729 + width: calc(100% - 30px);
730 + }
731 + }
732 +
733 + [data-theme="dark"] .message-card{
734 + background:#0d0d0d !important;
735 + border: 1px solid #f5f8ff;
736 + color: #f5f8ff !important;
737 + }
738 + [data-theme="dark"] .message-questions{
739 + background:#0d0d0d !important;
740 + color: #f5f8ff !important;
741 + }
742 + [data-theme="dark"] .message-footer{
743 + background:#0d0d0d !important;
744 + color: #f5f8ff !important;
745 + }
746 + [data-theme="dark"] .message-header{
747 + color: #ffffff;
748 + }
749 + [data-theme="dark"] .fake-title,.fake-lines{
750 + color: #0d0d0d;
751 + }
752 + [data-theme="dark"] .fake-content{
753 + background: #0d0d0d!important;
754 + }
Neuer Älter

Powered by Opengist ⋅ Load: 47ms⋅

Deutsch