{"html":"

\n","css":".wrapper {\n width: 200px;\n height: 60px;\n position: relative;\n display: flex;\n justify-content: center;\n z-index: 1;\n}\n\n.circle {\n width: 20px;\n height: 20px;\n position: absolute;\n border-radius: 50%;\n background-color: #fff;\n left: 15%;\n transform-origin: 50%;\n animation: circle7124 0.5s alternate infinite ease;\n border: solid 5px #000000;\n}\n\n.circle:nth-child(2) {\n left: 45%;\n animation-delay: 0.2s;\n}\n\n.circle:nth-child(3) {\n left: auto;\n right: 15%;\n animation-delay: 0.3s;\n}\n\n@keyframes circle7124 {\n 0% {\n top: 60px;\n height: 5px;\n border-radius: 50px 50px 25px 25px;\n transform: scaleX(2.7);\n background-color: #808080;\n }\n 40% {\n height: 20px;\n border-radius: 50%;\n transform: scaleX(1);\n background-color: rgb(44, 44, 44);\n }\n 100% {\n top: 0%;\n }\n}\n\n.shadow {\n width: 20px;\n height: 4px;\n border-radius: 50%;\n background-color: rgba(0, 0, 0, 0.5);\n position: absolute;\n top: 62px;\n z-index: -1;\n left: 15%;\n filter: blur(1px);\n animation: shadow0461 0.5s alternate infinite ease;\n}\n\n.shadow:nth-child(4) {\n left: 45%;\n animation-delay: 0.2s;\n}\n\n.shadow:nth-child(5) {\n left: auto;\n right: 15%;\n animation-delay: 0.3s;\n}\n\n@keyframes shadow0461 {\n 0% {\n transform: scaleX(1.5);\n }\n 40% {\n transform: scaleX(1);\n opacity: 0.7;\n }\n 100% {\n transform: scaleX(0.2);\n opacity: 0.4;\n }\n}\n.circle2 {\n width: 20px;\n height: 20px;\n position: absolute;\n border-radius: 50%;\n background-color: #fff;\n left: 45%;\n transform-origin: 50%;\n animation: circle7124 0.5s alternate infinite ease;\n border: solid 5px #000000;\n animation-delay: 0.1s;\n}\n"}

wise-moose-80

👁 实时预览

📝 源代码