{"html":"\n","css":".button {\n width: 100%;\n height: 100%;\n height: 500px;\n position: relative;\n background: none;\n border: none;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.text {\n opacity: 0;\n position: absolute;\n color: #e8e8e8;\n font-size: 4rem;\n z-index: 5;\n pointer-events: none;\n transition: opacity 0.5s ease;\n animation: fuse 2s infinite;\n}\n@keyframes fuse {\n 20%,\n 80% {\n opacity: 0.6;\n }\n 40% {\n opacity: 0.2;\n }\n 60% {\n opacity: 0;\n }\n 70% {\n opacity: 0.4;\n }\n 75% {\n opacity: 0;\n }\n}\n\n.button:hover .text,\n.button:active .text {\n opacity: 1;\n animation-play-state: paused;\n}\n\n.katana-container {\n width: 100%;\n height: 100%;\n position: absolute;\n margin: 50px auto;\n background: none;\n transform: rotate(90deg);\n border-radius: 50%;\n cursor: pointer;\n}\n\n.katana {\n position: absolute;\n width: 400px;\n height: 30px;\n top: 50%;\n left: 50%;\n transform-origin: center;\n transition: transform 0.8s cubic-bezier(0.15, 1.15, 0.35, 1.15);\n}\n\n.blade {\n width: 75%;\n height: 6px;\n background: linear-gradient(\n 90deg,\n #c0c0c0 0%,\n #e8e8e8 20%,\n #ffffff 50%,\n #e8e8e8 80%,\n #c0c0c0 100%\n );\n position: absolute;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n border-radius: 0 50% 50% 0;\n box-shadow: 0 0 10px rgba(200, 200, 200, 0.5);\n}\n\n/* Curved blade effect */\n.blade::before {\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n 90deg,\n transparent 0%,\n rgba(255, 255, 255, 0.2) 30%,\n rgba(255, 255, 255, 0.8) 50%,\n rgba(255, 255, 255, 0.2) 70%,\n transparent 100%\n );\n border-radius: 0 50% 50% 0;\n transform: translateY(-1px);\n}\n\n.handle {\n width: 25%;\n height: 28px;\n background: repeating-linear-gradient(\n 45deg,\n transparent,\n transparent 4px,\n rgba(139, 69, 19, 0.5) 4px,\n rgba(139, 69, 19, 0.5) 8px\n );\n position: absolute;\n left: 0px;\n border-radius: 15px;\n box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);\n}\n\n.guard {\n width: 40px;\n height: 40px;\n background: radial-gradient(\n circle at center,\n #2b2b2b 0%,\n #1a1a1a 60%,\n #000000 100%\n );\n position: absolute;\n left: 20%;\n top: 50%;\n transform: translateY(-50%);\n border-radius: 50%;\n box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);\n z-index: 1;\n}\n\n.guard::after {\n content: \"\";\n position: absolute;\n width: 80%;\n height: 80%;\n top: 10%;\n left: 10%;\n border-radius: 50%;\n background: repeating-radial-gradient(\n circle at center,\n #2b2b2b 0%,\n #1a1a1a 20%,\n #000000 40%\n );\n}\n\n.katana-1 {\n transform: translate(-60%, -60%) rotate(150deg) translateX(-100%);\n}\n\n.katana-2 {\n transform: translate(-60%, -60%) rotate(-150deg) translateX(-100%);\n}\n\n.katana-container:hover .katana-1,\n.katana-container:active .katana-1 {\n transform: translate(-60%, -60%) rotate(150deg) translateX(0);\n animation: katanaClash1 0.8s cubic-bezier(0.15, 1.15, 0.35, 1.15) forwards;\n}\n\n.katana-container:hover .katana-2,\n.katana-container:active .katana-2 {\n transform: translate(-60%, -60%) rotate(-150deg) translateX(0);\n animation: katanaClash2 0.8s cubic-bezier(0.15, 1.15, 0.35, 1.15) forwards;\n}\n\n@keyframes katanaClash1 {\n 0% {\n transform: translate(-60%, -60%) rotate(150deg) translateX(-100%);\n }\n 40% {\n transform: translate(-60%, -60%) rotate(125deg) translateX(-20%);\n }\n 70% {\n transform: translate(-60%, -60%) rotate(140deg) translateX(10%);\n }\n 100% {\n transform: translate(-60%, -60%) rotate(150deg) translateX(0%);\n }\n}\n\n@keyframes katanaClash2 {\n 0% {\n transform: translate(-60%, -60%) rotate(-150deg) translateX(100%);\n }\n 40% {\n transform: translate(-60%, -60%) rotate(-125deg) translateX(20%);\n }\n 70% {\n transform: translate(-60%, -60%) rotate(-140deg) translateX(-10%);\n }\n 100% {\n transform: translate(-60%, -60%) rotate(-150deg) translateX(0%);\n }\n}\n\n.katana-container::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0;\n height: 0;\n background: transparent;\n transform: translate(-70%, -70%);\n pointer-events: none;\n}\n\n.katana-container:hover::after,\n.katana-container:active::after {\n animation: clashSpark 0.8s cubic-bezier(0.15, 1.15, 0.35, 1.15);\n}\n\n@keyframes clashSpark {\n 0%,\n 100% {\n width: 0;\n height: 0;\n background: radial-gradient(\n circle,\n rgba(255, 255, 255, 0.9) 0%,\n transparent 70%\n );\n }\n 40% {\n width: 100px;\n height: 100px;\n background: radial-gradient(\n circle,\n rgba(255, 255, 255, 0.9) 0%,\n transparent 70%\n );\n }\n}\n"}

spotty-mule-38

👁 实时预览

📝 源代码