{"html":"

\n \n

\n uiverse.io\n

\n universe of ui\n

","css":".card {\n width: 300px;\n height: 200px;\n background: #243137;\n position: relative;\n display: grid;\n place-content: center;\n border-radius: 10px;\n overflow: hidden;\n transition: all 0.5s ease-in-out;\n}\n\n#logo-main, #logo-second {\n height: 100%;\n}\n\n#logo-main {\n fill: #bd9f67;\n}\n\n#logo-second {\n padding-bottom: 10px;\n fill: none;\n stroke: #bd9f67;\n stroke-width: 1px;\n}\n\n.border {\n position: absolute;\n inset: 0px;\n border: 2px solid #bd9f67;\n opacity: 0;\n transform: rotate(10deg);\n transition: all 0.5s ease-in-out;\n}\n\n.bottom-text {\n position: absolute;\n left: 50%;\n bottom: 13px;\n transform: translateX(-50%);\n font-size: 6px;\n text-transform: uppercase;\n padding: 0px 5px 0px 8px;\n color: #bd9f67;\n background: #243137;\n opacity: 0;\n letter-spacing: 7px;\n transition: all 0.5s ease-in-out;\n}\n\n.content {\n transition: all 0.5s ease-in-out;\n}\n\n.content .logo {\n height: 35px;\n position: relative;\n width: 33px;\n overflow: hidden;\n transition: all 1s ease-in-out;\n}\n\n.content .logo .logo1 {\n height: 33px;\n position: absolute;\n left: 0;\n}\n\n.content .logo .logo2 {\n height: 33px;\n position: absolute;\n left: 33px;\n}\n\n.content .logo .trail {\n position: absolute;\n right: 0;\n height: 100%;\n width: 100%;\n opacity: 0;\n}\n\n.content .logo-bottom-text {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n margin-top: 30px;\n color: #bd9f67;\n padding-left: 8px;\n font-size: 11px;\n opacity: 0;\n letter-spacing: none;\n transition: all 0.5s ease-in-out 0.5s;\n}\n\n.card:hover {\n border-radius: 0;\n transform: scale(1.1);\n}\n\n.card:hover .logo {\n width: 134px;\n animation: opacity 1s ease-in-out;\n}\n\n.card:hover .border {\n inset: 15px;\n opacity: 1;\n transform: rotate(0);\n}\n\n.card:hover .bottom-text {\n letter-spacing: 3px;\n opacity: 1;\n transform: translateX(-50%);\n}\n\n.card:hover .content .logo-bottom-text {\n opacity: 1;\n letter-spacing: 9.5px;\n}\n\n.card:hover .trail {\n animation: trail 1s ease-in-out;\n}\n\n@keyframes opacity {\n 0% {\n border-right: 1px solid transparent;\n }\n\n 10% {\n border-right: 1px solid #bd9f67;\n }\n\n 80% {\n border-right: 1px solid #bd9f67;\n }\n\n 100% {\n border-right: 1px solid transparent;\n }\n}\n\n@keyframes trail {\n 0% {\n background: linear-gradient(90deg, rgba(189, 159, 103, 0) 90%, rgb(189, 159, 103) 100%);\n opacity: 0;\n }\n\n 30% {\n background: linear-gradient(90deg, rgba(189, 159, 103, 0) 70%, rgb(189, 159, 103) 100%);\n opacity: 1;\n }\n\n 70% {\n background: linear-gradient(90deg, rgba(189, 159, 103, 0) 70%, rgb(189, 159, 103) 100%);\n opacity: 1;\n }\n\n 95% {\n background: linear-gradient(90deg, rgba(189, 159, 103, 0) 90%, rgb(189, 159, 103) 100%);\n opacity: 0;\n }\n}"}

spicy-rat-83

👁 实时预览

📝 源代码