正在准备设计规范
01.card-6 {02 width: 100%;03 display: flex;04 align-items: center;05 justify-content: center;06 perspective: 900px;07 margin: 34px 0;08}09 10.card-6__holo {11 position: relative;12 width: 140px;13 height: 140px;14 border-radius: 26px;15 transform-style: preserve-3d;16 display: flex;17 align-items: center;18 justify-content: center;19 pointer-events: none;20 animation: card6-wobble 6.2s ease-in-out infinite;21}22 23@keyframes card6-wobble {24 0% {25 transform: rotateX(16deg) rotateY(-18deg);26 }27 50% {28 transform: rotateX(18deg) rotateY(18deg);29 }30 100% {31 transform: rotateX(16deg) rotateY(-18deg);32 }33}34 35.card-6__layer {36 position: absolute;37 font-weight: 900;38 font-size: 108px;39 letter-spacing: -6px;40 line-height: 1;41 42 -webkit-text-stroke: 1px rgba(0, 123, 255, 0.7);43 44 background: linear-gradient(45 90deg,46 rgba(0, 123, 255, 0.18) 0%,47 rgba(0, 123, 255, 0.92) 35%,48 rgba(0, 180, 255, 0.7) 60%,49 rgba(0, 123, 255, 0.22) 100%50 );51 -webkit-background-clip: text;52 background-clip: text;53 color: transparent;54 55 filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.55));56 opacity: 0.95;57 transform-style: preserve-3d;58}59 60.card-6__layer--back {61 opacity: 0.18;62 filter: blur(1px);63 transform: translateZ(-70px);64 -webkit-text-stroke: 1px rgba(0, 123, 255, 0.45);65}66.card-6__layer--mid {67 opacity: 0.42;68 filter: blur(0.4px);69 transform: translateZ(-34px);70 -webkit-text-stroke: 1px rgba(0, 123, 255, 0.55);71}72.card-6__layer--front {73 opacity: 0.98;74 transform: translateZ(0px);75 -webkit-text-stroke: 1px rgba(0, 123, 255, 0.78);76}77 78.card-6__holo::before {79 content: "";80 position: absolute;81 inset: 0;82 border-radius: 26px;83 background: radial-gradient(84 circle at 40% 35%,85 rgba(0, 123, 255, 0.14),86 rgba(0, 0, 0, 0) 62%87 );88 filter: blur(8px);89 opacity: 0.9;90 transform: translateZ(-80px);91}92 93.card-6__holo::after {94 content: "";95 position: absolute;96 inset: 0;97 border-radius: 26px;98 border: 1px solid rgba(0, 123, 255, 0.16);99 background: linear-gradient(100 120deg,101 rgba(255, 255, 255, 0.05),102 rgba(255, 255, 255, 0.01) 45%,103 rgba(0, 0, 0, 0)104 );105 opacity: 0.55;106 transform: translateZ(-45px);107}108 109@media (max-width: 600px) {110 .card-6__holo {111 width: 128px;112 height: 128px;113 border-radius: 24px;114 }115 .card-6__layer {116 font-size: 96px;117 letter-spacing: -5px;118 }119}120 121@media (prefers-reduced-motion: reduce) {122 .card-6__holo {123 animation: none !important;124 }125}