{"html":"\n","css":".button {\n position: relative;\n padding: 14px 42px;\n font-size: 18px;\n font-weight: bold;\n color: white;\n border: none;\n border-radius: 50px;\n cursor: pointer;\n overflow: hidden;\n background: transparent;\n display: inline-block;\n z-index: 1;\n transition: transform 0.2s ease;\n}\n\n.button span {\n position: relative;\n z-index: 15;\n}\n\n.button:active {\n transform: scale(0.96);\n}\n\n.button::before {\n content: \"\";\n background: rgb(0 0 0);\n border-radius: inherit;\n height: calc(100% - 4px);\n width: calc(100% - 4px);\n position: absolute;\n top: 2px;\n left: 2px;\n z-index: 12;\n opacity: 0;\n transform: scale(0.95);\n transition: all 0.5s ease;\n}\n\n.button:hover::before {\n opacity: 1;\n transform: scale(1);\n}\n\n.bubble-layer {\n position: absolute;\n width: 150px;\n height: 150px;\n border-radius: 50%;\n filter: blur(10px);\n z-index: 0;\n}\n\n.bubble-1 {\n background: #ff007f;\n top: -20%;\n left: -10%;\n animation: moveUpRight 6s ease-in-out infinite;\n}\n.bubble-2 {\n background: #ff6a00;\n top: 0%;\n left: 10%;\n animation: moveDownLeft 5s ease-in-out infinite;\n animation-delay: 1s;\n}\n.bubble-3 {\n background: #ffcc00;\n top: 20%;\n left: 50%;\n animation: moveRight 4s ease-in-out infinite;\n animation-delay: 2s;\n}\n.bubble-4 {\n background: #00fff0;\n top: -20%;\n left: 70%;\n animation: moveUpLeft 7s ease-in-out infinite;\n animation-delay: 3s;\n}\n.bubble-5 {\n background: #9d00ff;\n top: 30%;\n left: -10%;\n animation: moveDownRight 3s ease-in-out infinite;\n animation-delay: 4s;\n}\n.bubble-6 {\n background: #ff007f;\n top: -10%;\n left: 30%;\n animation: moveLeft 8s ease-in-out infinite;\n animation-delay: 0.5s;\n}\n.bubble-7 {\n background: #ff6a00;\n top: 40%;\n left: 60%;\n animation: moveUp 6s ease-in-out infinite;\n animation-delay: 1.5s;\n}\n\n@keyframes moveUpRight {\n 0% {\n transform: translate(0, 0);\n }\n 25% {\n transform: translate(100%, -100%);\n }\n 50% {\n transform: translate(-50%, 50%);\n }\n 75% {\n transform: translate(50%, -50%);\n }\n 100% {\n transform: translate(0, 0);\n }\n}\n@keyframes moveDownLeft {\n 0% {\n transform: translate(0, 0);\n }\n 25% {\n transform: translate(-100%, 100%);\n }\n 50% {\n transform: translate(50%, -50%);\n }\n 75% {\n transform: translate(-50%, 50%);\n }\n 100% {\n transform: translate(0, 0);\n }\n}\n@keyframes moveRight {\n 0% {\n transform: translate(0, 0);\n }\n 25% {\n transform: translate(100%, 0);\n }\n 50% {\n transform: translate(-100%, 50%);\n }\n 75% {\n transform: translate(50%, -50%);\n }\n 100% {\n transform: translate(0, 0);\n }\n}\n@keyframes moveUpLeft {\n 0% {\n transform: translate(0, 0);\n }\n 25% {\n transform: translate(-100%, -100%);\n }\n 50% {\n transform: translate(50%, 50%);\n }\n 75% {\n transform: translate(-50%, -50%);\n }\n 100% {\n transform: translate(0, 0);\n }\n}\n@keyframes moveDownRight {\n 0% {\n transform: translate(0, 0);\n }\n 25% {\n transform: translate(100%, 100%);\n }\n 50% {\n transform: translate(-50%, -50%);\n }\n 75% {\n transform: translate(50%, 50%);\n }\n 100% {\n transform: translate(0, 0);\n }\n}\n@keyframes moveLeft {\n 0% {\n transform: translate(0, 0);\n }\n 25% {\n transform: translate(-100%, 0);\n }\n 50% {\n transform: translate(100%, -50%);\n }\n 75% {\n transform: translate(-50%, 50%);\n }\n 100% {\n transform: translate(0, 0);\n }\n}\n@keyframes moveUp {\n 0% {\n transform: translate(0, 0);\n }\n 25% {\n transform: translate(0, -100%);\n }\n 50% {\n transform: translate(50%, 50%);\n }\n 75% {\n transform: translate(-50%, -50%);\n }\n 100% {\n transform: translate(0, 0);\n }\n}\n"}

slimy-swan-21

👁 实时预览

📝 源代码