{"html":"

\n","css":"@keyframes rotateBall {\n 0% {\n transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);\n }\n 50% {\n transform: rotateY(360deg) rotateX(360deg) rotateZ(0deg);\n }\n 100% {\n transform: rotateY(720deg) rotateX(720deg) rotateZ(360deg);\n }\n}\n\n@keyframes bounceBall {\n 0% {\n transform: translateY(-70px) scale(1, 1);\n }\n 15% {\n transform: translateY(-56px) scale(1, 1);\n }\n 45% {\n transform: translateY(70px) scale(1, 1);\n }\n 50% {\n transform: translateY(73.5px) scale(1, 0.92);\n }\n 55% {\n transform: translateY(70px) scale(1, 0.95);\n }\n 85% {\n transform: translateY(-56px) scale(1, 1);\n }\n 95% {\n transform: translateY(-70px) scale(1, 1);\n }\n 100% {\n transform: translateY(-70px) scale(1, 1);\n }\n}\n\n.ball {\n animation-name: bounceBall;\n animation-duration: 1.2s;\n animation-iteration-count: infinite;\n animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);\n border-radius: 50%;\n height: 60px;\n position: relative;\n transform: translateY(-70px);\n transform-style: preserve-3d;\n width: 60px;\n z-index: 1;\n}\n\n.ball::before {\n background: radial-gradient(circle at 36px 20px, #ff8c16, #b35100);\n border: 2px solid #333333;\n border-radius: 50%;\n content: \"\";\n height: calc(100% + 6px);\n left: -6px;\n position: absolute;\n top: -3px;\n transform: translateZ(1vmin);\n width: calc(100% + 6px);\n}\n\n.ball .inner {\n animation-name: rotateBall;\n animation-duration: 25s;\n animation-iteration-count: infinite;\n animation-timing-function: linear;\n border-radius: 50%;\n height: 100%;\n position: absolute;\n transform-style: preserve-3d;\n width: 100%;\n}\n\n.ball .line::before,\n.ball .line::after {\n border: 2px solid #333333;\n border-radius: 50%;\n content: \"\";\n height: 99%;\n position: absolute;\n width: 99%;\n}\n\n.ball .line::before {\n transform: rotate3d(0, 0, 0, 0);\n}\n\n.ball .line::after {\n transform: rotate3d(1, 0, 0, 90deg);\n}\n\n.ball .line--two::before {\n transform: rotate3d(0, 0, 0, 2deg);\n}\n\n.ball .line--two::after {\n transform: rotate3d(1, 0, 0, 88deg);\n}\n\n.ball .oval::before,\n.ball .oval::after {\n border-top: 4px solid #333333;\n border-radius: 50%;\n content: \"\";\n height: 99%;\n position: absolute;\n width: 99%;\n}\n\n.ball .oval::before {\n transform: rotate3d(1, 0, 0, 45deg) translate3d(0, 0, 6px);\n}\n\n.ball .oval::after {\n transform: rotate3d(1, 0, 0, -45deg) translate3d(0, 0, -6px);\n}\n\n.ball .oval--two::before {\n transform: rotate3d(1, 0, 0, 135deg) translate3d(0, 0, -6px);\n}\n\n.ball .oval--two::after {\n transform: rotate3d(1, 0, 0, -135deg) translate3d(0, 0, 6px);\n}\n\n@keyframes bounceShadow {\n 0% {\n filter: blur(3px);\n opacity: 0.6;\n transform: translateY(73px) scale(0.5, 0.5);\n }\n 45% {\n filter: blur(1px);\n opacity: 0.9;\n transform: translateY(73px) scale(1, 1);\n }\n 55% {\n filter: blur(1px);\n opacity: 0.9;\n transform: translateY(73px) scale(1, 1);\n }\n 100% {\n filter: blur(3px);\n opacity: 0.6;\n transform: translateY(73px) scale(0.5, 0.5);\n }\n}\n\n.shadow {\n animation-name: bounceShadow;\n animation-duration: 1.2s;\n animation-iteration-count: infinite;\n animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);\n background: black;\n filter: blur(2px);\n border-radius: 50%;\n height: 6px;\n transform: translateY(73px);\n width: 54px;\n}\n"}

cuddly-dingo-93

👁 实时预览

📝 源代码