{"html":"

\n \n \n

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

\n\n","css":".loader {\n --size: 250px;\n width: var(--size);\n height: var(--size);\n zoom: 0.8;\n border: 4px solid #fff;\n border-radius: 50%;\n position: relative;\n --current-gray: #444;\n background-color: var(--current-gray);\n transform-origin: 50% 100%;\n animation: rotarBall 1s linear alternate infinite both;\n\n .cap {\n width: 50%;\n height: 18%;\n border-radius: 50%;\n border: inherit;\n left: 50%;\n position: absolute;\n top: -4%;\n transform: translateX(-50%);\n background-color: var(--current-gray);\n }\n\n .shadow-top {\n position: absolute;\n width: 55%;\n height: 25%;\n border-radius: 50%;\n background-color: #fff3;\n left: 50%;\n top: 19%;\n transform: translateX(-50%) scale(0.9);\n }\n\n .circle {\n width: 96%;\n height: 96%;\n background-color: #20a5e1;\n border-radius: inherit;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);\n animation: rotarCicle 1.5s linear alternate infinite both;\n }\n\n .circle-top {\n background-color: #40c9ff;\n width: 96%;\n height: 10%;\n position: absolute;\n border-radius: 50%;\n top: 45.5%;\n left: 50%;\n transform: translateX(-50%);\n animation: rotarCircleTop 1.5s linear alternate infinite both;\n }\n\n .fish {\n position: absolute;\n bottom: 50px;\n width: 40px;\n width: 50px;\n height: 50px;\n animation: moveFish 2s linear infinite both;\n }\n}\n\n.shadow-bottom {\n zoom: 0.8;\n position: absolute;\n top: calc(50% + 125px);\n left: 50%;\n transform: translate(-50%, -50%);\n width: 275px;\n height: 40px;\n z-index: -1;\n border-radius: 50%;\n background-color: #000a;\n filter: blur(20px);\n}\n\n@keyframes moveFish {\n 0% {\n left: 10%;\n transform: scaleX(1);\n }\n 50% {\n left: calc(90% - 40px);\n transform: scaleX(1);\n }\n 51% {\n left: calc(90% - 40px);\n transform: scaleX(-1);\n }\n 100% {\n left: 10%;\n transform: scaleX(-1);\n }\n}\n\n@keyframes rotarBall {\n 0% {\n transform: rotate(-10deg);\n }\n 100% {\n transform: rotate(10deg);\n }\n}\n\n@keyframes rotarCircleTop {\n 0% {\n transform: translateX(-50%) rotate(10deg);\n }\n 100% {\n transform: translateX(-50%) rotate(-10deg);\n }\n}\n\n@keyframes rotarCicle {\n 0% {\n transform: translate(-50%, -50%) rotate(10deg);\n }\n 100% {\n transform: translate(-50%, -50%) rotate(-10deg);\n }\n}\n"}

popular-lion-34

👁 实时预览

📝 源代码