{"html":"

\n \n \n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

Luminous Design

\n Light Folds Around Form
Revealing Layers Of Depth\n

\n Activate Lumen\n

\n \n

\n","css":".luminous-card-container {\n box-sizing: border-box;\n scroll-behavior: smooth;\n margin: 0;\n padding: 0;\n --sz: clamp(17px, min(2%, 3%), 24px);\n font-size: var(--sz);\n display: grid;\n place-items: center;\n background: #1e1e1e;\n background: radial-gradient(circle at 50% 30%, #2a2a2a 0%, #131313 64%);\n font-family: \"Aeonik Pro Regular\", sans-serif;\n min-height: 100%;\n overflow: hidden;\n min-width: 100%;\n}\n\n.luminous-card-container * {\n box-sizing: border-box;\n}\n\n.luminous-card {\n position: relative;\n background: radial-gradient(circle at 50% 0%, #3a3a3a 0%, #1a1a1a 64%);\n box-shadow:\n inset 0 1.01rem 0.2rem -1rem #fff0,\n inset 0 -1.01rem 0.2rem -1rem #0000,\n 0 -1.02rem 0.2rem -1rem #fff0,\n 0 1rem 0.2rem -1rem #0000,\n 0 0 0 1px #fff3,\n 0 4px 4px 0 #0004,\n 0 0 0 1px #333;\n width: 18rem;\n height: 24rem;\n border-radius: 1.8rem;\n color: #fff;\n padding: 1rem;\n display: flex;\n flex-direction: column;\n justify-content: end;\n transition:\n all 0.4s ease-in-out,\n translate 0.4s ease-out;\n}\n\n.luminous-card::before {\n content: \"\";\n display: block;\n --offset: 1rem;\n width: calc(100% + 2 * var(--offset));\n height: calc(100% + 2 * var(--offset));\n position: absolute;\n left: calc(-1 * var(--offset));\n right: calc(-1 * var(--offset));\n top: calc(-1 * var(--offset));\n bottom: calc(-1 * var(--offset));\n margin: auto;\n box-shadow: inset 0 0 0px 0.06rem #fff2;\n border-radius: 2.6rem;\n --ax: 4rem;\n clip-path: polygon(\n var(--ax) 0,\n 0 0,\n 0 var(--ax),\n var(--ax) var(--ax),\n var(--ax) calc(100% - var(--ax)),\n 0 calc(100% - var(--ax)),\n 0 100%,\n var(--ax) 100%,\n var(--ax) calc(100% - var(--ax)),\n calc(100% - var(--ax)) calc(100% - var(--ax)),\n calc(100% - var(--ax)) 100%,\n 100% 100%,\n 100% calc(100% - var(--ax)),\n calc(100% - var(--ax)) calc(100% - var(--ax)),\n calc(100% - var(--ax)) var(--ax),\n 100% var(--ax),\n 100% 0,\n calc(100% - var(--ax)) 0,\n calc(100% - var(--ax)) var(--ax),\n var(--ax) var(--ax)\n );\n transition: all 0.4s ease-in-out;\n}\n\n.luminous-card:hover {\n translate: 0 -0.2rem;\n}\n\n.luminous-card:hover::before {\n --offset: 0.5rem;\n --ax: 8rem;\n border-radius: 2.2rem;\n box-shadow: inset 0 0 0 0.08rem #fff1;\n}\n\n.luminous-light-layer {\n position: absolute;\n left: 0;\n top: 0;\n height: 100%;\n width: 100%;\n transform-style: preserve-3d;\n perspective: 400px;\n pointer-events: none;\n}\n\n.luminous-slit {\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n margin: auto;\n width: 64%;\n height: 1.2rem;\n transform: rotateX(-76deg);\n background: #121212;\n box-shadow: 0 0 4px 0 #fff0;\n transition: all 0.4s ease-in-out;\n}\n\n.luminous-lumen {\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n margin: auto;\n width: 100%;\n height: 100%;\n pointer-events: none;\n perspective: 400px;\n opacity: 0;\n transition: opacity 0.4s ease-in-out;\n}\n\n.luminous-lumen .min {\n width: 70%;\n height: 3rem;\n background: linear-gradient(#fff0, #fffa);\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 2.5rem;\n margin: auto;\n transform: rotateX(-42deg);\n opacity: 0.4;\n}\n\n.luminous-lumen .mid {\n width: 74%;\n height: 13rem;\n background: linear-gradient(#fff0, #fffa);\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 10em;\n margin: auto;\n transform: rotateX(-42deg);\n filter: blur(1rem);\n opacity: 0.8;\n border-radius: 100% 100% 0 0;\n}\n\n.luminous-lumen .hi {\n width: 50%;\n height: 13rem;\n background: linear-gradient(#fff0, #fffa);\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 12em;\n margin: auto;\n transform: rotateX(22deg);\n filter: blur(1rem);\n opacity: 0.6;\n border-radius: 100% 100% 0 0;\n}\n\n.luminous-darken {\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n margin: auto;\n width: 100%;\n height: 100%;\n pointer-events: none;\n perspective: 400px;\n transition: opacity 0.4s ease-in-out;\n opacity: 0.5;\n}\n\n.luminous-darken > * {\n transition: opacity 0.4s ease-in-out;\n}\n\n.luminous-darken .sl {\n width: 64%;\n height: 10rem;\n background: linear-gradient(#000, #0000);\n position: absolute;\n left: 0;\n right: 0;\n top: 9.6em;\n bottom: 0;\n margin: auto;\n filter: blur(0.2rem);\n opacity: 0.1;\n border-radius: 0 0 100% 100%;\n transform: rotateX(-22deg);\n}\n\n.luminous-darken .ll {\n width: 62%;\n height: 10rem;\n background: linear-gradient(#000a, #0000);\n position: absolute;\n left: 0;\n right: 0;\n top: 11em;\n bottom: 0;\n margin: auto;\n filter: blur(0.8rem);\n opacity: 0.4;\n border-radius: 0 0 100% 100%;\n transform: rotateX(22deg);\n}\n\n.luminous-darken .slt {\n width: 0.5rem;\n height: 4rem;\n background: linear-gradient(#0005, #0000);\n position: absolute;\n left: 0;\n right: 11.5rem;\n top: 3.9em;\n bottom: 0;\n margin: auto;\n opacity: 0.6;\n border-radius: 0 0 100% 100%;\n transform: skewY(42deg);\n}\n\n.luminous-darken .srt {\n width: 0.5rem;\n height: 4rem;\n background: linear-gradient(#0005, #0000);\n position: absolute;\n right: 0;\n left: 11.5rem;\n top: 3.9em;\n bottom: 0;\n margin: auto;\n opacity: 0.6;\n border-radius: 0 0 100% 100%;\n transform: skewY(-42deg);\n}\n\n.luminous-content {\n position: relative;\n z-index: 1;\n}\n\n.luminous-icon {\n position: absolute;\n top: -13rem;\n left: 0;\n right: 0;\n margin: auto;\n width: fit-content;\n filter: drop-shadow(0 -1.2rem 1px transparent);\n transition: filter 0.4s ease-in-out;\n}\n\n.luminous-bottom {\n position: relative;\n}\n\n.luminous-title {\n margin: 0;\n margin-bottom: 1rem;\n font-size: 1.2rem;\n color: #fff;\n font-weight: normal;\n}\n\n.luminous-description {\n margin: 0;\n padding-bottom: 0.6rem;\n color: #aaa;\n font-size: 0.6rem;\n font-weight: 100;\n border-bottom: 1px solid #fff1;\n max-width: 64%;\n}\n\n.luminous-toggle-input {\n display: none;\n}\n\n.luminous-toggle {\n position: absolute;\n right: 0;\n bottom: 0;\n height: 2rem;\n width: 4.8rem;\n border-radius: 0.6rem;\n background: #000;\n box-shadow:\n inset 0 -8px 8px 0.3rem #0004,\n inset 0 0 1px 0.3rem #ddd,\n inset 0 -2px 1px 0.3rem #fff,\n inset 0 1px 2px 0.3rem #0006,\n inset 0 0 1px 0.8rem #aaa;\n cursor: pointer;\n transition: all 0.4s ease-in-out;\n}\n\n.luminous-toggle::before {\n content: \"\";\n display: block;\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n margin: auto;\n width: 3.4rem;\n height: 0.68rem;\n border-radius: 0.2rem;\n background: #000;\n transition: all 0.4s ease-in-out;\n}\n\n.luminous-handle {\n position: absolute;\n top: 0;\n bottom: 0.04rem;\n margin: auto;\n left: 0.68rem;\n width: 40%;\n height: 30%;\n background: #aaa;\n border-radius: 0.2rem;\n box-shadow:\n inset 0 1px 4px 0 #fff,\n inset 0 -1px 1px 0 #000a,\n 0 0 1px 1px #0003,\n 1px 3px 6px 1px #000a;\n transition: all 0.4s ease-in-out;\n pointer-events: none;\n}\n\n.luminous-toggle-input:checked\n ~ .luminous-content\n .luminous-toggle\n .luminous-handle {\n transform: translateX(1.58rem);\n}\n\n.luminous-toggle-label {\n pointer-events: none;\n text-align: center;\n position: absolute;\n left: 0;\n right: 0;\n margin: auto;\n bottom: calc(100% + 0.4rem);\n font-size: 0.6rem;\n font-weight: 100;\n color: #999;\n opacity: 0;\n transition: opacity 0.4s ease-in-out;\n}\n\n.luminous-toggle:hover .luminous-toggle-label {\n opacity: 1;\n}\n\n.luminous-toggle:not(\n .luminous-toggle-input:checked ~ .luminous-content .luminous-toggle\n ):hover\n .luminous-handle {\n transform: translateX(0.2rem);\n}\n\n.luminous-toggle-input:checked ~ .luminous-card {\n box-shadow:\n inset 0 1.01rem 0.1rem -1rem #fffa,\n inset 0 -4rem 3rem -3rem #000a,\n 0 -1.02rem 0.2rem -1rem #fffa,\n 0 1rem 0.2rem -1rem #000,\n 0 0 0 1px #fff2,\n 0 4px 4px 0 #0004,\n 0 0 0 1px #333;\n}\n\n.luminous-toggle-input:checked ~ .luminous-card .luminous-slit {\n background: #fff;\n box-shadow: 0 0 4px 0 #fff;\n}\n\n.luminous-toggle-input:checked ~ .luminous-card .luminous-lumen {\n opacity: 0.5;\n}\n\n.luminous-toggle-input:checked ~ .luminous-card .luminous-darken {\n opacity: 0.8;\n}\n\n.luminous-toggle-input:checked ~ .luminous-card .luminous-darken .sl {\n opacity: 0.2;\n}\n\n.luminous-toggle-input:checked ~ .luminous-card .luminous-darken .ll {\n opacity: 1;\n}\n\n.luminous-toggle-input:checked ~ .luminous-card .luminous-darken .slt {\n opacity: 1;\n}\n\n.luminous-toggle-input:checked ~ .luminous-card .luminous-darken .srt {\n opacity: 1;\n}\n\n.luminous-toggle-input:checked ~ .luminous-card .luminous-icon {\n filter: drop-shadow(0 -1.2rem 2px #0003) brightness(1.64);\n}\n\n.luminous-toggle-input:checked ~ .luminous-card .luminous-toggle::before {\n background: #fffc;\n box-shadow: 0 0 0.3rem 0.2rem #fff7;\n}\n\n.luminous-toggle-input:checked ~ .luminous-card .luminous-handle {\n box-shadow:\n inset 0 1px 12px 0 #fff,\n inset 0 -1px 1px 0 #fffa,\n 0 0 2px 1px #4443,\n 1px 3px 6px 1px #0004;\n}\n"}

chatty-eel-90

👁 实时预览

📝 源代码