{"html":"

\n","css":"/* General Styles */\n.mainWrap {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n perspective: 1000px; /* Perspective for 3D effect */\n}\n\n.mainWrap div {\n transform-origin: center center;\n}\n\n.wrapper {\n position: relative;\n}\n\n.c1 {\n border-radius: 100%;\n height: 200px;\n width: 200px;\n border: 1px solid #e7b439;\n animation:\n rotFirst 30s linear infinite,\n fadeIn 2s forwards; /* Added fade-in animation */\n transform: rotateX(10deg) rotateY(10deg); /* 3D perspective */\n transform-style: preserve-3d; /* Enable 3D transforms */\n}\n\n.c1 .c2 {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) rotateX(10deg) rotateY(10deg); /* 3D perspective */\n border-radius: 100%;\n height: 190px;\n width: 190px;\n border: 1px solid #ffb61e;\n border-style: dashed;\n}\n\n.c1 .c2 .c3 {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) rotateX(10deg) rotateY(10deg); /* 3D perspective */\n border: 1px solid #ffb61e;\n height: 180px;\n width: 180px;\n border-radius: 100%;\n animation: changeColor 30s linear infinite;\n}\n\n.c1 .c2 .c3 .rect1 {\n border: 1px solid #ffb61e;\n border-style: dotted;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) rotateX(10deg) rotateY(10deg); /* 3D perspective */\n height: 120px;\n width: 120px;\n}\n\n.c1 .c2 .c3 .rect1 .miniC {\n text-align: center;\n height: 120px;\n width: 120px;\n position: relative;\n}\n\n.c1 .c2 .c3 .rect1 .miniC .box {\n height: 10px;\n width: 10px;\n border: 1px solid #ffb61e;\n border-radius: 100%;\n margin: 4px;\n}\n\n.c1 .c2 .c3 .rect1 .miniC .miniC1 {\n position: absolute;\n top: -12%;\n left: 50%;\n transform: translate(-50%, -50%) rotateX(10deg) rotateY(10deg); /* 3D perspective */\n height: 20px;\n width: 20px;\n border: 3px solid #ffb61e;\n border-radius: 100%;\n animation: changeColor 30s linear infinite;\n}\n\n.c1 .c2 .c3 .rect1 .miniC .miniC2 {\n position: absolute;\n top: 50%;\n left: -12%;\n transform: translate(-50%, -50%) rotateX(10deg) rotateY(10deg); /* 3D perspective */\n height: 20px;\n width: 20px;\n border: 3px solid #ffb61e;\n border-radius: 100%;\n animation: changeColor 30s linear infinite;\n}\n\n.c1 .c2 .c3 .rect1 .miniC .miniC3 {\n position: absolute;\n top: 50%;\n left: 112%;\n transform: translate(-50%, -50%) rotateX(10deg) rotateY(10deg); /* 3D perspective */\n height: 20px;\n width: 20px;\n border: 3px solid #ffb61e;\n border-radius: 100%;\n animation: changeColor 30s linear infinite;\n}\n\n.c1 .c2 .c3 .rect1 .miniC .miniC4 {\n position: absolute;\n top: 112%;\n left: 50%;\n transform: translate(-50%, -50%) rotateX(10deg) rotateY(10deg); /* 3D perspective */\n height: 20px;\n width: 20px;\n border: 3px solid #ffb61e;\n border-radius: 100%;\n animation: changeColor 30s linear infinite;\n}\n\n.c1 .c2 .c3 .rect1 .c4 {\n border: 1px solid #ffb61e;\n height: 120px;\n width: 120px;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) rotateX(10deg) rotateY(10deg); /* 3D perspective */\n border-radius: 100%;\n border-style: dotted;\n animation: changeColor 30s linear infinite;\n}\n\n.c1 .c2 .c3 .rect1 .c4 .rect2 {\n border: 1px solid #ffb61e;\n height: 80px;\n width: 80px;\n margin: 20px auto 0px auto;\n animation: rotminiC 10s linear infinite;\n}\n\n.c1 .c2 .c3 .rect1 .c4 .rect3 {\n border: 1px solid #ffb61e;\n height: 80px;\n width: 80px;\n transform: rotate(135deg);\n transform-origin: center center;\n}\n\n.c1 .c2 .c3 .rect1 .c5 {\n border: 1px solid #ffb61e;\n height: 70px;\n width: 70px;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) rotateX(10deg) rotateY(10deg); /* 3D perspective */\n border-radius: 100%;\n animation: changeColor 30s linear infinite;\n}\n\n.c1 .c2 .c3 .rect1 .c6 {\n border: 3px solid #ffb61e;\n height: 50px;\n width: 50px;\n animation: changeColor 30s linear infinite;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) rotateX(10deg) rotateY(10deg); /* 3D perspective */\n border-radius: 100%;\n}\n\n/* Hover State */\n.c1:hover,\n.c1 .c2:hover,\n.c1 .c2 .c3:hover {\n box-shadow: 0 0 20px #efb61e;\n cursor: pointer;\n transition:\n transform 0.5s ease-in-out,\n box-shadow 0.5s ease-in-out;\n}\n\n/* Keyframes */\n@keyframes rotFirst {\n 0% {\n transform: rotate(-360deg);\n }\n 100% {\n transform: rotate(0deg);\n }\n}\n\n@keyframes rotminiC {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(-360deg);\n }\n}\n\n@keyframes changeColor {\n 0% {\n box-shadow: 0px 0px 70px #fa9542;\n border: 3px solid #fa9642;\n }\n}\n\n/* Fade-in animation for loading phase */\n@keyframes fadeIn {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n"}

wicked-dingo-2

👁 实时预览

📝 源代码