{"html":"

\n","css":".container-ia-chat {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: end;\n width: 300px;\n}\n\n.container-upload-files {\n position: absolute;\n left: 0;\n display: flex;\n color: #aaaaaa;\n transition: all 0.5s;\n\n & .upload-file {\n margin: 5px;\n padding: 2px;\n cursor: pointer;\n transition: all 0.5s;\n\n &:hover {\n color: #4c4c4c;\n scale: 1.1;\n }\n }\n}\n\n.input-text {\n max-width: 190px;\n width: 100%;\n margin-left: 72px;\n padding: 0.75rem 1rem;\n padding-right: 46px;\n border-radius: 50px;\n border: none;\n outline: none;\n background-color: #e9e9e9;\n color: #4c4c4c;\n font-size: 14px;\n line-height: 18px;\n font-family: \"Segoe UI\", Tahoma, Geneva, Verdana, sans-serif;\n font-weight: 500;\n transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.05);\n z-index: 999;\n\n &::placeholder {\n color: #959595;\n }\n\n &:focus-within,\n &:valid {\n max-width: 250px;\n margin-left: 42px;\n\n & ~ .container-upload-files {\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n filter: blur(5px);\n }\n\n & ~ .label-files {\n transform: translateX(0) translateY(-50%) scale(1);\n opacity: 1;\n visibility: visible;\n pointer-events: all;\n }\n }\n\n &::selection {\n background-color: #4c4c4c;\n color: #e9e9e9;\n }\n\n &:valid ~ .label-text {\n transform: translateX(0) translateY(-50%) scale(1);\n opacity: 1;\n visibility: visible;\n pointer-events: all;\n }\n\n &:valid ~ .label-voice {\n transform: translateX(0) translateY(-50%) scale(0.25);\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n }\n}\n\n.input-voice {\n display: none;\n\n &:checked ~ .container-upload-files {\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n filter: blur(5px);\n }\n\n &:checked ~ .input-text {\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n filter: blur(5px);\n }\n}\n\n.label-files {\n position: absolute;\n top: 50%;\n left: 0;\n transform: translateX(-20px) translateY(-50%) scale(1);\n display: flex;\n padding: 0.5rem;\n color: #959595;\n background-color: #e9e9e9;\n border-radius: 50px;\n cursor: pointer;\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.05);\n\n &:focus-visible,\n &:hover {\n color: #4c4c4c;\n }\n}\n\n.label-voice,\n.label-text {\n position: absolute;\n top: 50%;\n right: 0.25rem;\n transform: translateX(0) translateY(-50%) scale(1);\n width: 36px;\n height: 36px;\n display: flex;\n padding: 6px;\n border: none;\n outline: none;\n cursor: pointer;\n transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.05);\n z-index: 999;\n}\n\n.input-voice:checked ~ .label-voice {\n background-color: #e9e9e9;\n right: 0;\n width: 300px;\n height: 300px;\n border-radius: 3rem;\n box-shadow:\n 0 10px 40px rgba(0, 0, 60, 0.25),\n inset 0 0 10px rgba(255, 255, 255, 0.5);\n\n & .icon-voice {\n opacity: 0;\n }\n\n & .text-voice p {\n opacity: 1;\n }\n}\n\n.label-voice {\n color: #959595;\n overflow: hidden;\n\n &:hover,\n &:focus-visible {\n color: #4c4c4c;\n }\n\n &:active svg {\n scale: 1.1;\n }\n\n & .icon-voice {\n position: absolute;\n transition: all 0.3s;\n }\n\n & .text-voice {\n position: absolute;\n inset: 1.25rem;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n\n & p {\n opacity: 0;\n transition: all 0.3s;\n text-wrap: nowrap;\n\n &:first-child {\n font-size: 20px;\n font-weight: 500;\n color: transparent;\n background-image: linear-gradient(\n -40deg,\n #959595 0% 35%,\n #e770cd 40%,\n #ffcef4 50%,\n #e770cd 60%,\n #959595 65% 100%\n );\n background-clip: text;\n background-size: 900px;\n animation: text-light 6s ease infinite;\n }\n\n &:last-child {\n font-size: 12px;\n color: #2b2b2b;\n mix-blend-mode: difference;\n }\n }\n }\n}\n\n@keyframes text-light {\n 0% {\n background-position: 0px;\n }\n\n 100% {\n background-position: 900px;\n }\n}\n\n.label-text {\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n transform: translateY(-50%) scale(0.25);\n color: #e9e9e9;\n background: linear-gradient(to top right, #9147ff, #ff4141);\n box-shadow: inset 0 0 4px rgba(255, 255, 255, 0.5);\n border-radius: 50px;\n\n &:hover,\n &:focus-visible {\n transform-origin: top center;\n box-shadow: inset 0 0 6px rgba(255, 255, 255, 1);\n }\n\n &:active {\n scale: 0.9;\n }\n}\n\n.ai {\n --z: 0;\n --s: 300px;\n --p: calc(var(--s) / 4);\n width: var(--s);\n aspect-ratio: 1;\n padding: var(--p);\n display: grid;\n place-items: center;\n position: relative;\n animation: circle1 5s ease-in-out infinite;\n\n &::before,\n &::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n width: 50%;\n height: 50%;\n border-radius: 50%;\n border: 2px solid white;\n box-shadow: 0 0 30px rgba(234, 170, 255, 1);\n filter: blur(5px);\n transform: translate(-50%, -50%);\n animation: wave 1.5s linear infinite;\n }\n\n &::after {\n animation-delay: 0.4s;\n }\n}\n\n@keyframes wave {\n 0% {\n transform: translate(-50%, -50%) scale(1);\n opacity: 0;\n box-shadow: 0 0 50px rgba(234, 170, 255, 0.9);\n }\n 35% {\n transform: translate(-50%, -50%) scale(1.3);\n opacity: 1;\n }\n 70%,\n 100% {\n transform: translate(-50%, -50%) scale(1.6);\n opacity: 0;\n box-shadow: 0 0 50px rgba(234, 170, 255, 0.3);\n }\n}\n\n@keyframes ai1 {\n 0% {\n transform: rotate(0deg) translate(50%) scale(0.9);\n opacity: 0;\n }\n\n 25% {\n transform: rotate(90deg) translate(50%) scale(1.8);\n opacity: 1;\n }\n\n 50% {\n transform: rotate(180deg) translate(50%) scale(0.7);\n opacity: 0.4;\n }\n\n 75% {\n transform: rotate(270deg) translate(50%) scale(1.2);\n opacity: 1;\n }\n\n 100% {\n transform: rotate(360deg) translate(50%) scale(0.9);\n opacity: 0;\n }\n}\n\n@keyframes ai2 {\n 0% {\n transform: rotate(90deg) translate(50%) scale(0.5);\n }\n\n 25% {\n transform: rotate(180deg) translate(50%) scale(1.7);\n opacity: 0;\n }\n\n 50% {\n transform: rotate(270deg) translate(50%) scale(1);\n opacity: 0;\n }\n\n 75% {\n transform: rotate(360deg) translate(50%) scale(0.8);\n opacity: 0;\n }\n\n 100% {\n transform: rotate(450deg) translate(50%) scale(0.5);\n opacity: 1;\n }\n}\n\n@keyframes ai3 {\n 0% {\n transform: rotate(180deg) translate(50%) scale(0.8);\n opacity: 0.8;\n }\n\n 25% {\n transform: rotate(270deg) translate(50%) scale(1.5);\n }\n\n 50% {\n transform: rotate(360deg) translate(50%) scale(0.6);\n opacity: 0.4;\n }\n\n 75% {\n transform: rotate(450deg) translate(50%) scale(1.3);\n opacity: 0.7;\n }\n\n 100% {\n transform: rotate(540deg) translate(50%) scale(0.8);\n opacity: 0.8;\n }\n}\n\n@keyframes ai4 {\n 0% {\n transform: rotate(270deg) translate(50%) scale(1);\n opacity: 1;\n }\n\n 25% {\n transform: rotate(360deg) translate(50%) scale(0.7);\n }\n\n 50% {\n transform: rotate(450deg) translate(50%) scale(1.6);\n opacity: 0.5;\n }\n\n 75% {\n transform: rotate(540deg) translate(50%) scale(0.9);\n opacity: 0.8;\n }\n\n 100% {\n transform: rotate(630deg) translate(50%) scale(1);\n opacity: 1;\n }\n}\n\n.c {\n position: absolute;\n width: 300px;\n aspect-ratio: 1;\n border-radius: 50%;\n}\n\n.c1 {\n background: radial-gradient(50% 50% at center, #c979ee, #74bcd6);\n width: 200px;\n animation: ai1 5.5s linear infinite;\n}\n\n.c2 {\n background: radial-gradient(50% 50% at center, #ef788c, #e7e7fb);\n width: 100px;\n animation: ai2 6s linear infinite;\n}\n\n.c3 {\n background: radial-gradient(50% 50% at center, #eb7fc6, transparent);\n width: 150px;\n opacity: 0.6;\n animation: ai3 4.8s linear infinite;\n}\n\n.c4 {\n background: #6d67c8;\n animation: ai4 5.2s linear infinite;\n}\n\n.container {\n overflow: hidden;\n background: #b6a9f8;\n width: 100%;\n border-radius: 50%;\n aspect-ratio: 1;\n position: relative;\n display: grid;\n place-items: center;\n}\n\n.glass {\n overflow: hidden;\n position: absolute;\n inset: calc(var(--p) - 4px);\n border-radius: 50%;\n backdrop-filter: blur(10px);\n box-shadow:\n 0 0 50px rgba(255, 255, 255, 0.3),\n 0 50px 50px rgba(0, 0, 0, 0.3),\n 0 0 25px rgba(255, 255, 255, 1);\n background: radial-gradient(\n 75px at 70% 30%,\n rgba(255, 255, 255, 0.7),\n transparent\n );\n}\n\n.rings {\n aspect-ratio: 1;\n border-radius: 50%;\n position: absolute;\n inset: 0;\n perspective: 11rem;\n opacity: 0.9;\n\n &:before,\n &:after {\n content: \"\";\n position: absolute;\n inset: 0;\n background: rgba(255, 0, 0, 1);\n border-radius: 50%;\n border: 6px solid transparent;\n mask:\n linear-gradient(#fff 0 0) padding-box,\n linear-gradient(#fff 0 0);\n background: linear-gradient(white, blue, magenta, violet, lightyellow)\n border-box;\n mask-composite: exclude;\n }\n}\n\n.rings::before {\n animation: ring180 10s ease-in-out infinite;\n}\n\n.rings::after {\n animation: ring90 10s ease-in-out infinite;\n}\n\n@keyframes ring180 {\n 0% {\n transform: rotateY(180deg) rotateX(180deg) rotateZ(180deg);\n }\n\n 25% {\n transform: rotateY(180deg) rotateX(180deg) rotateZ(180deg);\n }\n\n 50% {\n transform: rotateY(360deg) rotateX(360deg) rotateZ(360deg);\n }\n\n 80% {\n transform: rotateY(360deg) rotateX(360deg) rotateZ(360deg);\n }\n\n 100% {\n transform: rotateY(540deg) rotateX(540deg) rotateZ(540deg);\n }\n}\n\n@keyframes ring90 {\n 0% {\n transform: rotateY(90deg) rotateX(90deg) rotateZ(90deg);\n }\n\n 25% {\n transform: rotateY(90deg) rotateX(90deg) rotateZ(90deg) scale(1.1);\n }\n\n 50% {\n transform: rotateY(270deg) rotateX(270deg) rotateZ(270deg);\n }\n\n 75% {\n transform: rotateY(270deg) rotateX(270deg) rotateZ(270deg);\n }\n\n 100% {\n transform: rotateY(450deg) rotateX(450deg) rotateZ(450deg);\n }\n}\n\n@keyframes circle1 {\n 0% {\n transform: scale(0.97);\n }\n\n 15% {\n transform: scale(1);\n }\n\n 30% {\n transform: scale(0.98);\n }\n\n 45% {\n transform: scale(1);\n }\n\n 60% {\n transform: scale(0.97);\n }\n\n 85% {\n transform: scale(1);\n }\n\n 100% {\n transform: scale(0.97);\n }\n}\n"}

cowardly-goat-90

👁 实时预览

📝 源代码