{"html":"

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

Waiting More Faster

\n","css":".gear-wrapper:active .gear.g2 {\n position: relative;\n animation: none;\n transform: translateY(-100px);\n transition: 2s;\n}\n\n.gear-wrapper:active .gear.g1 {\n position: relative;\n animation: none;\n transform: translateX(-100px);\n transition: 2s;\n}\n\n.gear-wrapper:active .gear.g3 {\n position: relative;\n animation: none;\n transform: translateX(100px);\n transition: 2s;\n}\n\n.container {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n user-select: none;\n}\n\n.container::before {\n content: \"\";\n background: #fff8;\n width: 100%;\n height: 16%;\n top: -20%;\n left: 0%;\n position: absolute;\n filter: blur(150px);\n}\n\n.container::after {\n content: \"\";\n background: #000;\n width: 100%;\n height: 20%;\n bottom: -16%;\n left: 0%;\n position: absolute;\n filter: blur(100px);\n}\n\n.gear-wrapper ~ .text {\n opacity: 0;\n transition: all 0.8s ease-in-out;\n transform: skewX(2deg);\n position: relative;\n left: -500%;\n}\n.gear-wrapper:hover ~ .text {\n opacity: 1;\n color: #067c40;\n font-size: 18pt;\n font-weight: 600;\n transition: all 0.8s ease-in-out;\n transform: skewX(-12deg);\n left: 0;\n}\n.gear-wrapper:hover::before {\n width: 150px;\n transition: all 0.3s ease-in-out;\n right: 0;\n}\n\n.gear-wrapper::before {\n content: \"\";\n position: absolute;\n background: #067c40aa;\n height: 10px;\n width: 60%;\n top: 80px;\n border-radius: 50%;\n filter: blur(15px);\n}\n\n.gear-wrapper {\n width: 120px;\n height: 120px;\n display: flex;\n justify-content: center;\n align-items: center;\n background: transparent;\n position: relative;\n}\n\n.gear {\n position: relative;\n width: 100%;\n height: 100%;\n animation: rotateGear 4s linear infinite;\n}\n\n.g1 {\n position: relative;\n left: 22px;\n}\n\n.g2 {\n position: relative;\n top: -25px;\n animation: rotateGear 4s linear infinite reverse;\n transition: 4s;\n}\n\n.g3 {\n position: relative;\n right: 22px;\n}\n\n.gear-wrapper:hover .g1,\n.gear-wrapper:hover .g3 {\n animation: rotateGear 0.8s linear infinite;\n filter: drop-shadow(1px 1px 2px #067c40);\n}\n\n.gear-wrapper:hover .g2 {\n animation: rotateGear 0.8s linear infinite reverse;\n filter: drop-shadow(1px 1px 2px #067c40);\n}\n\n@keyframes rotateGear {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n/* SPARKLES */\n.spark {\n position: absolute;\n width: 6px;\n height: 6px;\n background: #067c40;\n border-radius: 50%;\n opacity: 0;\n pointer-events: none;\n}\n\n.gear-wrapper .spark,\n.gear-wrapper:active .spark,\n.gear-wrapper:hover:active .spark {\n opacity: 0;\n left: 0;\n animation: none;\n}\n\n.gear-wrapper:hover .spark {\n opacity: 1;\n animation: sparkLeft 0.4s ease-out forwards infinite;\n}\n\n.gear-wrapper:hover .spark:nth-child(1) {\n top: 0%;\n left: 50%;\n}\n\n.gear-wrapper:hover .spark:nth-child(2) {\n top: 20%;\n left: 50%;\n}\n\n.gear-wrapper:hover .spark:nth-child(3) {\n top: 35%;\n left: 50%;\n}\n\n@keyframes sparkLeft {\n 0% {\n transform: translate(0, -50%) scale(1);\n opacity: 1;\n }\n\n 100% {\n transform: translate(-100px, -50%) scale(0.5);\n opacity: 0;\n }\n}\n"}

ugly-fish-32

👁 实时预览

📝 源代码