{"html":"

\n viper viper viper viper\n viper viper viper viper\n viper viper viper viper\n

\n \n

\n\t

\n\t\t

\n\t

\n\tLorem ipsum\n\tLorem ipsum\n

","css":".card-border {\n z-index: 0;\n position: relative;\n padding: 1rem;\n width: 300px;\n height: 350px;\n box-sizing: border-box;\n background: transparent;\n backdrop-filter: blur(40px);\n border-radius: 0px 2rem;\n background-image: radial-gradient(#2121218a, #212121cc), linear-gradient(35deg,#124926 62%,#57ff94 100%);\n background-origin: border-box;\n background-clip: content-box, border-box;\n box-shadow: 1px 1px 3rem #57ff95;\n transition: all 0.5s;\n animation: pulse_3011 3s infinite;\n}\n\n.card-bg {\n position: relative;\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n overflow: hidden;\n border-radius: 0px 0.8rem;\n background: linear-gradient(346.80deg, #124926 30%, #165c30 30%, rgba(255, 70, 84, 0) 30%, rgba(255, 70, 84, 0) 32%, #124926 32%, #124926 35%, transparent 35%);\n}\n\nstrong {\n display: flex;\n height: 100%;\n width: 100%;\n text-transform: uppercase;\n font-family: 'Open Sans Pro', sans-serif;\n font-size: 1.6rem;\n font-weight: 900;\n align-items: center;\n letter-spacing: 0.5rem;\n}\n\n#text-border {\n position: absolute;\n top: 15.35rem;\n left: 1.5rem;\n width: 100%;\n height: fit-content;\n color: transparent;\n -webkit-text-stroke-width: 1px;\n -webkit-text-stroke-color: rgb(255, 255, 255);\n background: linear-gradient(90deg, transparent 100%, #ffffff 65%);\n background-size: cover;\n background-clip: text;\n -webkit-background-clip: text;\n}\n\n#text-ext {\n z-index: -1;\n display: flex;\n position: absolute;\n inset: 1rem;\n -webkit-text-stroke-width: 1px;\n -webkit-text-stroke-color: #ffffff;\n background: linear-gradient(346.80deg, rgb(255, 255, 255) 30%, #ffffff 30%, #ffffff 30%, rgb(255, 255, 255) 32%, rgb(255, 255, 255) 32%, rgb(255, 255, 255) 35%);\n background-size: cover;\n background-clip: text;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n padding: 9rem 0 0 0.5rem;\n}\n\n.marquee {\n top: 0;\n z-index: -5;\n width: 100%;\n height: 100%;\n position: absolute;\n overflow: hidden;\n --offset: 2rem;\n --move-initial: calc(-20% + var(--offset));\n --move-final: calc(-85% + var(--offset));\n border-radius: 0px 1rem;\n filter: opacity(0.3);\n}\n\n.marquee__inner {\n width: fit-content;\n display: flex;\n position: relative;\n transform: translate3d(var(--move-initial), 0, 0);\n animation: slide 60s linear infinite;\n border-radius: 0px 1rem;\n}\n\n.marquee__inner {\n animation-play-state: running;\n}\n\n#blur-area {\n display: block;\n position: absolute;\n z-index: -1;\n inset: 0;\n /* border: 1px solid rgb(12, 255, 65); */\n border-radius: 0 1rem;\n backdrop-filter: blur(3px);\n background: linear-gradient(90deg, transparent 0%, #00000044 100%);\n}\n\n.viper {\n display: flex;\n text-transform: uppercase;\n font-family: 'Open Sans Pro', sans-serif;\n font-size: 8rem;\n font-weight: 900;\n align-items: center;\n line-height: 0.9em;\n color: transparent;\n -webkit-text-stroke-width: 2px;\n -webkit-text-stroke-color: rgb(255, 255, 255);\n}\n\n.container-logo {\n display: flex;\n position: absolute;\n width: 3.5rem;\n height: 3em;\n top: 1rem;\n left: 1rem;\n align-items: center;\n justify-content: center;\n clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);\n}\n\n.logo {\n position: absolute;\n width: 200%;\n height: 200%;\n background: conic-gradient(#228647 0%, #fff 10%, #7bffac 25%, #0d381c 50%, #1ccc5d 70%, #69b384 90%);\n animation: spin 5s linear infinite;\n}\n\n.logo-inside {\n display: flex;\n width: 85%;\n height: 85%;\n align-items: center;\n justify-content: center;\n clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);\n background-color: #212121;\n}\n\n.first, .second {\n position: absolute;\n width: 30px;\n height: 30px;\n background-color: #57ff95;\n}\n\n.first {\n clip-path: polygon(0 10%, 70% 90%, 35% 90%, 0 50%);\n}\n\n.second {\n clip-path: polygon(100% 10%, 100% 50%, 88% 65%, 55% 65%);\n}\n\n.mist-container {\n position: absolute;\n width: 450px;\n height: 150px;\n overflow: hidden;\n filter: blur(1rem);\n top: 60%;\n left: 0;\n}\n\n.mist {\n width: 100%;\n height: 100%;\n background: radial-gradient(circle, rgba(131, 255, 158, 0.63) 10%, rgba(255, 255, 255, 0) 50%);\n animation: mist 10s infinite both;\n}\n\nsvg {\n position: absolute;\n top: 0%;\n width: 18rem;\n height: 100%;\n z-index: -2;\n}\n\n.card-border:hover {\n transform: rotateY(20deg);\n}\n\n@keyframes spin {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n}\n\n@keyframes mist {\n 0% {\n transform: translateX(-50%) translateY(0%) scaleY(0.7) rotate(0deg);\n opacity: 0.3;\n }\n\n 50% {\n transform: translateX(0%) translateY(50%) scaleY(-10.3) rotate(20deg);\n opacity: 0.5;\n }\n\n 100% {\n transform: translateX(-50%) translateY(0%) scaleY(0.7) rotate(-20deg);\n opacity: 0.3;\n }\n}\n\n@keyframes pulse_3011 {\n 0% {\n box-shadow: 0 0 1rem #57ff95;\n }\n\n 70% {\n box-shadow: 0 0 2rem #57ff95;\n }\n\n 100% {\n box-shadow: 0 0 1rem #57ff95;\n }\n}\n\n@keyframes slide {\n 0% {\n transform: translate3d(var(--move-initial), 0, 0);\n }\n\n 100% {\n transform: translate3d(var(--move-final), 0, 0);\n }\n}"}

curvy-gecko-61

👁 实时预览

📝 源代码