{"html":"\n

","css":".dot-spinner {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n --uib-speed: 0.9s;\n height: 2.8rem;\n width: 2.8rem;\n /*animation: float 3s linear infinite;*/\n}\n\n@keyframes float {\n 0% {\n transform: rotate(0deg) translate(100px) rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg) translate(100px) rotate(-360deg);\n }\n}\n\n.dot-spinner__dot::before {\n content: '';\n height: 20%;\n width: 20%;\n border-radius: 50%;\n background-color: #fff;\n filter: drop-shadow(0 0 10px rgb(95, 150, 202));\n box-shadow: -6px -6px 11px #c1c1c1,\n 6px 6px 11px #ffffff;\n transform: scale(0);\n opacity: 0.5;\n animation: pulse0112 calc(var(--uib-speed) * 1.111) ease-in-out infinite;\n box-shadow: 0 0 20px rgba(18, 31, 53, 0.3);\n}\n\n.dot-spinner__dot {\n position: absolute;\n top: 0;\n left: 0;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n height: 100%;\n width: 100%;\n}\n\n.dot-spinner__dot:nth-child(2) {\n transform: rotate(45deg);\n}\n\n.dot-spinner__dot:nth-child(2)::before {\n animation-delay: calc(var(--uib-speed) * -0.875);\n}\n\n.dot-spinner__dot:nth-child(3) {\n transform: rotate(90deg);\n}\n\n.dot-spinner__dot:nth-child(3)::before {\n animation-delay: calc(var(--uib-speed) * -0.75);\n}\n\n.dot-spinner__dot:nth-child(4) {\n transform: rotate(135deg);\n}\n\n.dot-spinner__dot:nth-child(4)::before {\n animation-delay: calc(var(--uib-speed) * -0.625);\n}\n\n.dot-spinner__dot:nth-child(5) {\n transform: rotate(180deg);\n}\n\n.dot-spinner__dot:nth-child(5)::before {\n animation-delay: calc(var(--uib-speed) * -0.5);\n}\n\n.dot-spinner__dot:nth-child(6) {\n transform: rotate(225deg);\n}\n\n.dot-spinner__dot:nth-child(6)::before {\n animation-delay: calc(var(--uib-speed) * -0.375);\n}\n\n.dot-spinner__dot:nth-child(7) {\n transform: rotate(270deg);\n}\n\n.dot-spinner__dot:nth-child(7)::before {\n animation-delay: calc(var(--uib-speed) * -0.25);\n}\n\n.dot-spinner__dot:nth-child(8) {\n transform: rotate(315deg);\n}\n\n.dot-spinner__dot:nth-child(8)::before {\n animation-delay: calc(var(--uib-speed) * -0.125);\n}\n\n@keyframes pulse0112 {\n 0%,\n 100% {\n transform: scale(0);\n opacity: 0.5;\n }\n\n 50% {\n transform: scale(1);\n opacity: 1;\n }\n}"}

tall-duck-28

👁 实时预览

📝 源代码