{"html":"

\n TITLE\n

\n \n

\n Some extra Information\n

","css":".container {\n font-family: \"Segoe UI\", Tahoma, Geneva, Verdana, sans-serif;\n font-style: italic;\n font-weight: bold;\n display: flex;\n margin: auto;\n aspect-ratio: 16/9;\n align-items: center;\n justify-items: center;\n justify-content: center;\n flex-wrap: wrap;\n flex-direction: column;\n gap: 1em;\n}\n\n.card-container {\n filter: drop-shadow(46px 36px 24px #4090b5) drop-shadow(-55px -40px 25px #9e30a9);\n animation: blinkShadowsFilter 8s ease-in infinite;\n}\n\n.card-content {\n display: grid;\n align-content: center;\n justify-items: center;\n align-items: center;\n text-align: center;\n padding: 1em;\n grid-template-rows: 0.1fr 0.7fr 0.25fr;\n background-color: hsl(296, 59%, 10%);\n width: 10em;\n aspect-ratio: 9/16;\n -webkit-clip-path: polygon(0 0, 85% 0, 100% 14%, 100% 60%, 92% 65%, 93% 77%, 99% 80%, 99% 90%, 89% 100%, 0 100%);\n clip-path: polygon(0 0, 85% 0, 100% 14%, 100% 60%, 92% 65%, 93% 77%, 99% 80%, 99% 90%, 89% 100%, 0 100%);\n}\n\n.card-content::before {\n content: \"\";\n position: absolute;\n width: 250%;\n aspect-ratio: 1/1;\n transform-origin: center;\n background: linear-gradient(to bottom, transparent, transparent, #66e0ff, #66e0ff, #e366ff, #e366ff, transparent, transparent), linear-gradient(to left, transparent, transparent, #66e0ff, #66e0ff, #e366ff, #e366ff, transparent, transparent);\n animation: rotate 5s infinite linear;\n}\n\n.card-content::after {\n content: \"\";\n position: absolute;\n top: 1%;\n left: 1%;\n width: 98%;\n height: 98%;\n background: repeating-linear-gradient(to bottom, transparent 0%, rgba(64, 144, 181, 0.6) 1px, rgb(0, 0, 0) 3px, rgba(64, 144, 181, 0.3019607843) 5px, #153544 4px, transparent 0.5%), repeating-linear-gradient(to left, hsl(295, 60%, 12%) 100%, hsla(295, 60%, 12%, 0.99) 100%);\n box-shadow: inset 0px 0px 30px 40px hsl(296, 59%, 10%);\n -webkit-clip-path: polygon(0 0, 85% 0, 100% 14%, 100% 60%, 92% 65%, 93% 77%, 99% 80%, 99% 90%, 89% 100%, 0 100%);\n clip-path: polygon(0 0, 85% 0, 100% 14%, 100% 60%, 92% 65%, 93% 77%, 99% 80%, 99% 90%, 89% 100%, 0 100%);\n animation: backglitch 94ms linear infinite;\n}\n\n.card-title {\n z-index: 80;\n -webkit-clip-path: polygon(90% 0, 100% 100%, 0% 100%, 0% 0%);\n clip-path: polygon(90% 0, 100% 100%, 0% 100%, 0% 0%);\n background: linear-gradient(90deg, rgba(255, 254, 250, 0) 0%, rgba(102, 224, 255, 0.3) 27%, rgba(102, 224, 255, 0.3) 63%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(102, 224, 255, 0.3) 0%, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0) 96%, rgba(102, 224, 255, 0.3) 100%);\n width: 98%;\n font-size: 1.2em;\n}\n\n.title {\n width: 100%;\n height: 100%;\n text-align: right;\n position: relative;\n z-index: 2;\n color: hsl(192, 100%, 88%);\n font-size: 1em;\n transition: all ease-in-out 2s linear;\n}\n\n.card-body {\n padding-block: 1.5em;\n padding-inline: 1em;\n z-index: 80;\n display: flex;\n gap: 1.5em;\n flex-wrap: wrap;\n justify-content: space-around;\n align-items: center;\n align-content: center;\n}\n\n.svg-card {\n text-decoration: none;\n color: hsl(192, 100%, 88%);\n background: linear-gradient(90deg, transparent 0%, rgba(102, 224, 255, 0.2) 27%, rgba(102, 224, 255, 0.2) 63%, transparent 100%);\n fill: currentColor;\n width: 2em;\n aspect-ratio: 1/1;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: 0.5s;\n}\n\n.svg-card .face {\n width: 0.7em;\n}\n\n.svg-card .twit {\n width: 1em;\n}\n\n.svg-card .insta {\n width: 1em;\n}\n\n.svg-card .whats {\n width: 1.1em;\n}\n\n.svg-card:hover {\n cursor: pointer;\n color: hsl(192, 100%, 100%);\n}\n\n.card-footer {\n padding-inline: 1em;\n}\n\n@keyframes backglitch {\n 0% {\n box-shadow: inset 0px 20px 30px 40px hsl(296, 59%, 10%);\n }\n\n 50% {\n box-shadow: inset 0px -20px 30px 40px hsl(296, 59%, 10.2%);\n }\n\n to {\n box-shadow: inset 0px 20px 30px 40px hsl(296, 59%, 10%);\n }\n}\n\n@keyframes rotate {\n 0% {\n transform: rotate(0deg) translate(-50%, 20%);\n }\n\n 50% {\n transform: rotate(180deg) translate(40%, 10%);\n }\n\n to {\n transform: rotate(360deg) translate(-50%, 20%);\n }\n}\n\n@keyframes blinkShadowsFilter {\n 0% {\n filter: drop-shadow(46px 36px 28px rgba(64, 144, 181, 0.3411764706)) drop-shadow(-55px -40px 28px #9e30a9);\n }\n\n 25% {\n filter: drop-shadow(46px -36px 24px rgba(64, 144, 181, 0.8980392157)) drop-shadow(-55px 40px 24px #9e30a9);\n }\n\n 50% {\n filter: drop-shadow(46px 36px 30px rgba(64, 144, 181, 0.8980392157)) drop-shadow(-55px 40px 30px rgba(159, 48, 169, 0.2941176471));\n }\n\n 75% {\n filter: drop-shadow(20px -18px 25px rgba(64, 144, 181, 0.8980392157)) drop-shadow(-20px 20px 25px rgba(159, 48, 169, 0.2941176471));\n }\n\n to {\n filter: drop-shadow(46px 36px 28px rgba(64, 144, 181, 0.3411764706)) drop-shadow(-55px -40px 28px #9e30a9);\n }\n}/*# sourceMappingURL=style.css.map */"}

empty-otter-85

👁 实时预览

📝 源代码