{"html":"

\n","css":".circle-loader {\n width: 80px;\n height: 80px;\n border-radius: 50%;\n overflow: hidden;\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n row-gap: 4px;\n column-gap: 4px;\n animation: circle 6s linear infinite;\n}\n.circle-loader .circle {\n box-shadow:\n inset 4px 4px 4px 0 rgba(255, 255, 255, 0.5),\n inset -1px -1px 1px 1px rgba(255, 255, 255, 0.5);\n background-image: linear-gradient(-225deg, #e3fdf5 0%, #ffe6fa 100%);\n float: left;\n animation: circleScaleDelay 1.3s infinite ease-in-out;\n border-radius: 45%;\n}\n.circle-loader .circle1 {\n animation-delay: 0.2s;\n}\n.circle-loader .circle2 {\n animation-delay: 0.3s;\n}\n.circle-loader .circle3 {\n animation-delay: 0.4s;\n}\n.circle-loader .circle4 {\n animation-delay: 0.1s;\n}\n.circle-loader .circle5 {\n animation-delay: 0.2s;\n}\n.circle-loader .circle6 {\n animation-delay: 0.3s;\n}\n.circle-loader .circle7 {\n animation-delay: 0s;\n}\n.circle-loader .circle8 {\n animation-delay: 0.1s;\n}\n.circle-loader .circle9 {\n animation-delay: 0.2s;\n}\n@keyframes circleScaleDelay {\n 0%,\n 70%,\n 100% {\n transform: scale3D(1, 1, 1);\n }\n 35% {\n transform: scale3D(0, 0, 1);\n }\n}\n@keyframes circle {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n"}

chilly-dog-23

👁 实时预览

📝 源代码