{"html":"

\n\n

\n","css":".cradle,\n.wood,\n.ballPlate,\n.ballWrapper,\n.ball,\n.floor {\n padding: 0;\n margin: 0 auto;\n box-sizing: border-box;\n transform-style: preserve-3d;\n}\n.line {\n background-color: #ffffff;\n}\n\n.ball {\n width: 2em;\n height: 2em;\n border-radius: 50%;\n background: radial-gradient(circle, #ff4d4d 0%, #b30000 100%);\n box-shadow: 0 0 0.5em #600;\n}\n\n.cradle {\n position: relative;\n animation: rotate 60s infinite linear;\n}\n@keyframes rotate {\n to {\n transform: rotateY(360deg);\n }\n}\n.floor {\n position: absolute;\n width: 20em;\n height: 20em;\n background-color: #fff;\n background-image: radial-gradient(#012 a, #111 66%);\n background-size: 20em, 10em;\n transform: translate(-50%, -50%) rotateX(90deg) translateZ(-3em);\n}\n.floor::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 8.5em;\n height: 4.5em;\n background-color: #000;\n filter: blur(0.3em);\n}\n.wood {\n --width: 0;\n --height: 0;\n --depth: 0;\n position: absolute;\n top: 0;\n left: 0;\n width: var(--width);\n height: var(--height);\n transform: translate(-50%, -50%);\n}\n.wood.base {\n --width: 8em;\n --height: 1em;\n --depth: 4em;\n transform: translate(-50%, calc(-50% + 2.5em));\n}\n.wood.poll {\n --width: 0.25em;\n --height: 3em;\n --depth: 0.25em;\n}\n.wood.poll:nth-child(3) {\n transform: translate3d(calc(-50% + 3.5em), calc(-50% + 0.5em), 1.5em);\n}\n.wood.poll:nth-child(4) {\n transform: translate3d(calc(-50% + 3.5em), calc(-50% + 0.5em), -1.5em);\n}\n.wood.poll:nth-child(5) {\n transform: translate3d(calc(-50% + -3.5em), calc(-50% + 0.5em), 1.5em);\n}\n.wood.poll:nth-child(6) {\n transform: translate3d(calc(-50% + -3.5em), calc(-50% + 0.5em), -1.5em);\n}\n.wood.strecher {\n --width: 8em;\n --height: 0.25em;\n --depth: 1em;\n}\n.wood.strecher:nth-child(7) {\n transform: translate3d(-50%, calc(-50% - 1em), 1.5em);\n}\n.wood.strecher:nth-child(8) {\n transform: translate3d(-50%, calc(-50% - 1em), -1.5em);\n}\n.wood.strecher .dots::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-image: radial-gradient(circle at 76% 50%, #777 0px, #777 0 2px),\n radial-gradient(circle at 63% 50%, #777 0px, #777 0 2px),\n radial-gradient(circle at 50% 50%, #777 0px, #777 0 2px),\n radial-gradient(circle at 37% 50%, #777 0px, #777 0 2px),\n radial-gradient(circle at 24% 50%, #777 0px, #777 0 2px);\n}\n.wood > * {\n position: absolute;\n box-shadow: 0 0 1em #000 7 inset;\n background-size: 5em;\n background-image: url(\"s://assets.codepen.io/1948355/wood04.png\");\n}\n.wood > .top {\n width: var(--width);\n height: var(--depth);\n transform: translateY(-50%) rotateX(90deg);\n background-color: #6f463f;\n}\n.wood > .left {\n width: var(--depth);\n height: var(--height);\n transform: translateX(-50%) rotateY(90deg);\n background-color: #5f3c35;\n}\n.wood > .right {\n width: var(--depth);\n height: var(--height);\n right: 0;\n transform: translateX(50%) rotateY(90deg);\n background-color: #1d1211;\n}\n.wood > .front {\n width: var(--width);\n height: var(--height);\n transform: translateZ(calc(var(--depth) / 2));\n background-color: #3e2723;\n}\n.wood > .back {\n width: var(--width);\n height: var(--height);\n transform: translateZ(calc(var(--depth) / -2));\n background-color: #3e2723;\n}\n.ballPlate {\n position: absolute;\n top: -1em;\n width: 2em;\n height: 3em;\n transform: translate(-50%, 0%) rotateY(90deg);\n transform-origin: top;\n}\n.ballPlate:nth-child(9) {\n left: -2.05em;\n animation: ballPlateStart 3s infinite;\n}\n.ballPlate:nth-child(9) .ballWrapper {\n animation: ballWrapperStart 3s infinite;\n}\n.ballPlate:nth-child(9) .ball {\n background-position-y: 0%;\n}\n.ballPlate:nth-child(10) {\n left: -1.025em;\n animation: ballPlateSwing 3s linear infinite;\n}\n.ballPlate:nth-child(10) .ballWrapper {\n animation: ballWrapperSwing 3s linear infinite;\n}\n.ballPlate:nth-child(10) .ball {\n background-position-y: 25%;\n}\n.ballPlate:nth-child(11) {\n left: 0;\n animation: ballPlateSwing 3s linear infinite;\n}\n.ballPlate:nth-child(11) .ballWrapper {\n animation: ballWrapperSwing 3s linear infinite;\n}\n.ballPlate:nth-child(11) .ball {\n background-position-y: 50%;\n}\n.ballPlate:nth-child(12) {\n left: 1.025em;\n animation: ballPlateSwing 3s linear infinite;\n}\n.ballPlate:nth-child(12) .ballWrapper {\n animation: ballWrapperSwing 3s linear infinite;\n}\n.ballPlate:nth-child(12) .ball {\n background-position-y: 75%;\n}\n.ballPlate:nth-child(13) {\n left: 2.05em;\n animation: ballPlateEnd 3s infinite;\n}\n.ballPlate:nth-child(13) .ballWrapper {\n animation: ballWrapperEnd 3s infinite;\n}\n.ballPlate:nth-child(13) .ball {\n background-position-y: 100%;\n}\n@keyframes ballPlateSwing {\n 0%,\n 100% {\n transform: translate(-50%, 0%) rotateY(90deg) rotateX(5deg);\n }\n 50% {\n transform: translate(-50%, 0%) rotateY(90deg) rotateX(-5deg);\n }\n}\n@keyframes ballPlateStart {\n 0%,\n 100% {\n animation-timing-function: ease-out;\n transform: translate(-50%, 0%) rotateY(90deg) rotateX(5deg);\n }\n 50% {\n animation-timing-function: ease-out;\n transform: translate(-50%, 0%) rotateY(90deg) rotateX(-5deg);\n }\n 75% {\n animation-timing-function: ease-in;\n transform: translate(-50%, 0%) rotateY(90deg) rotateX(-80deg);\n }\n}\n@keyframes ballPlateEnd {\n 0%,\n 100% {\n animation-timing-function: ease-out;\n transform: translate(-50%, 0%) rotateY(90deg) rotateX(5deg);\n }\n 25% {\n animation-timing-function: ease-in;\n transform: translate(-50%, 0%) rotateY(90deg) rotateX(80deg);\n }\n 50% {\n animation-timing-function: ease-out;\n transform: translate(-50%, 0%) rotateY(90deg) rotateX(-5deg);\n }\n}\n@keyframes ballWrapperSwing {\n 0%,\n 100% {\n transform: rotateY(90deg) rotate(-5deg);\n }\n 50% {\n transform: rotateY(90deg) rotate(5deg);\n }\n}\n@keyframes ballWrapperStart {\n 0%,\n 100% {\n animation-timing-function: ease-out;\n transform: rotateY(90deg) rotate(-5deg);\n }\n 50% {\n animation-timing-function: ease-out;\n transform: rotateY(90deg) rotate(5deg);\n }\n 75% {\n animation-timing-function: ease-in;\n transform: rotateY(90deg) rotate(80deg);\n }\n}\n@keyframes ballWrapperEnd {\n 0%,\n 100% {\n animation-timing-function: ease-out;\n transform: rotateY(90deg) rotate(-5deg);\n }\n 25% {\n animation-timing-function: ease-in;\n transform: rotateY(90deg) rotate(-80deg);\n }\n 50% {\n animation-timing-function: ease-out;\n transform: rotateY(90deg) rotate(5deg);\n }\n}\n.ballPlate .ballWrapper {\n position: absolute;\n bottom: 0.1em;\n left: calc(50% - 0.5em);\n width: 1em;\n height: 1em;\n}\n.ballPlate .ball {\n position: absolute;\n width: 1em;\n height: 1em;\n background-color: #fff;\n border-radius: 50%;\n background-image: radial-gradient(circle at top, #fff, #678 a, #000);\n background-size: 1em, 5em;\n box-shadow: 0 0 10px #000 a inset;\n animation:\n backPos 120s infinite linear,\n rotate 60s infinite linear reverse;\n}\n@keyframes backPos {\n from {\n background-position-x: center, 5em;\n }\n to {\n background-position-x: center, 0;\n }\n}\n.ballPlate .line {\n position: absolute;\n top: 0;\n width: 2px;\n height: 2.15em;\n background-color: #fff 7;\n transform-origin: top;\n}\n.ballPlate .line::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: #fff 7;\n transform: rotateY(90deg);\n}\n.ballPlate .line:nth-child(2) {\n transform: translateX(-1px) rotate(-20deg);\n}\n.ballPlate .line:nth-child(3) {\n right: 0;\n transform: translateX(1px) rotate(20deg);\n}\n.shadow {\n position: absolute;\n top: 50%;\n width: 3em;\n height: 3em;\n background-image: radial-gradient(#000 6, #000 0 50%);\n}\n.shadow:nth-child(1) {\n animation:\n shadowSwing 3s ease-out infinite,\n shadowStart 3s ease-out infinite;\n}\n.shadow:nth-child(2) {\n left: 2.975em;\n animation: shadowSwing 3s linear infinite;\n}\n.shadow:nth-child(3) {\n left: 4em;\n animation: shadowSwing 3s linear infinite;\n}\n.shadow:nth-child(4) {\n left: 5.025em;\n animation: shadowSwing 3s linear infinite;\n}\n.shadow:nth-child(5) {\n animation:\n shadowSwing 3s ease-out infinite,\n shadowEnd 3s ease-out infinite;\n}\n@keyframes shadowSwing {\n 0%,\n 100% {\n transform: translate(-50%, -50%) rotateX(0deg) translateZ(0em)\n translateX(10px);\n }\n 50% {\n transform: translate(-50%, -50%) rotateX(0deg) translateZ(0em)\n translateX(-10px);\n }\n}\n@keyframes shadowStart {\n 0%,\n 50%,\n 100% {\n left: 1.95em;\n opacity: 1;\n }\n 75% {\n left: 0;\n opacity: -0.5;\n animation-timing-function: ease-in;\n }\n}\n@keyframes shadowEnd {\n 0%,\n 50%,\n 100% {\n left: 6.05em;\n opacity: 1;\n }\n 25% {\n left: 8em;\n opacity: -0.5;\n animation-timing-function: ease-in;\n }\n}\n.twitterLink {\n font-size: 24px;\n}\n"}

afraid-seahorse-5

👁 实时预览

📝 源代码