{"html":"

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n","css":"#wholeThing {\n height: 700px;\n width: 500px;\n scale: 0.8;\n}\n\n#newtonsCradle,\n#newtonsCradleLeft,\n#newtonsCradleRight {\n position: absolute;\n}\n\n#newtonsCradle {\n top: 90px;\n left: -115px; /*Use top and left to change the position of the newton's cradle*/\n}\n\n#newtonsCradleRight {\n animation: swingRight 2s infinite both;\n animation-delay: 1s;\n rotate: -90deg;\n grid-area: right;\n top: -24px;\n left: -37px; /*Use top and left to change the position of the right swinging ball*/\n}\n\n@keyframes swingRight {\n 0% {\n rotate: -90deg;\n }\n\n 30% {\n rotate: 0deg;\n }\n\n 75% {\n rotate: 0deg;\n }\n\n 100% {\n rotate: -90deg;\n }\n}\n\n#newtonsCradleLeft {\n animation: swingLeft 2s infinite both ease-out;\n rotate: 90deg;\n grid-area: left;\n top: -24px;\n left: -173px; /*Use top and left to change the position of the left swinging ball*/\n}\n\n@keyframes swingLeft {\n 0% {\n rotate: 90deg;\n }\n\n 30% {\n rotate: 0deg;\n }\n\n 75% {\n rotate: 0deg;\n }\n\n 100% {\n rotate: 90deg;\n }\n}\n"}

tasty-otter-13

👁 实时预览

📝 源代码