{"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 \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":".main {\n display: flex;\n justify-content: center;\n align-items: center;\n scale: 1.6;\n}\n\n#pizza {\n background-color: transparent;\n transform-origin: center center;\n animation: rotate 45s linear infinite;\n -webkit-animation: rotate 45s linear infinite;\n}\n\n#slice1 {\n animation: slice1 4s ease-in-out infinite;\n -webkit-animation: slice1 4s ease-in-out infinite;\n}\n\n#slice2 {\n animation: slice2 4s ease-in-out infinite;\n animation-delay: 1s;\n -webkit-animation: slice2 4s ease-in-out infinite;\n}\n\n#slice3 {\n animation: slice3 4s ease-in-out infinite;\n animation-delay: 2s;\n -webkit-animation: slice3 4s ease-in-out infinite;\n}\n\n#slice4 {\n animation: slice4 4s ease-in-out infinite;\n animation-delay: 3s;\n -webkit-animation: slice4 4s ease-in-out infinite;\n}\n\n#slice5 {\n animation: slice5 4s ease-in-out infinite;\n animation-delay: 4s;\n -webkit-animation: slice5 4s ease-in-out infinite;\n}\n\n#slice6 {\n animation: slice6 4s ease-in-out infinite;\n animation-delay: 5s;\n -webkit-animation: slice6 4s ease-in-out infinite;\n}\n\n@keyframes rotate {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n -webkit-transform: rotate(360deg);\n -moz-transform: rotate(360deg);\n -ms-transform: rotate(360deg);\n -o-transform: rotate(360deg);\n }\n}\n\n@keyframes slice1 {\n 0%,\n 100% {\n transform: translate(0, 0);\n -webkit-transform: translate(0, 0);\n -moz-transform: translate(0, 0);\n -ms-transform: translate(0, 0);\n -o-transform: translate(0, 0);\n }\n 50% {\n transform: translate(5%, 5%);\n -webkit-transform: translate(5%, 5%);\n -moz-transform: translate(5%, 5%);\n -ms-transform: translate(5%, 5%);\n -o-transform: translate(5%, 5%);\n }\n}\n\n@keyframes slice2 {\n 0%,\n 100% {\n transform: translate(0, 0);\n -webkit-transform: translate(0, 0);\n -moz-transform: translate(0, 0);\n -ms-transform: translate(0, 0);\n -o-transform: translate(0, 0);\n }\n 50% {\n transform: translate(0%, 7%);\n -webkit-transform: translate(0%, 7%);\n -moz-transform: translate(0%, 7%);\n -ms-transform: translate(0%, 7%);\n -o-transform: translate(0%, 7%);\n }\n}\n\n@keyframes slice3 {\n 0%,\n 100% {\n transform: translate(0, 0);\n -webkit-transform: translate(0, 0);\n -moz-transform: translate(0, 0);\n -ms-transform: translate(0, 0);\n -o-transform: translate(0, 0);\n }\n 50% {\n transform: translate(-5%, 5%);\n -webkit-transform: translate(-5%, 5%);\n -moz-transform: translate(-5%, 5%);\n -ms-transform: translate(-5%, 5%);\n -o-transform: translate(-5%, 5%);\n }\n}\n\n@keyframes slice4 {\n 0%,\n 100% {\n transform: translate(0, 0);\n -webkit-transform: translate(0, 0);\n -moz-transform: translate(0, 0);\n -ms-transform: translate(0, 0);\n -o-transform: translate(0, 0);\n }\n 50% {\n transform: translate(-5%, 0%);\n -webkit-transform: translate(-5%, 0%);\n -moz-transform: translate(-5%, 0%);\n -ms-transform: translate(-5%, 0%);\n -o-transform: translate(-5%, 0%);\n }\n}\n\n@keyframes slice5 {\n 0%,\n 100% {\n transform: translate(0, 0);\n -webkit-transform: translate(0, 0);\n -moz-transform: translate(0, 0);\n -ms-transform: translate(0, 0);\n -o-transform: translate(0, 0);\n }\n 50% {\n transform: translate(0%, -3%);\n -webkit-transform: translate(0%, -3%);\n -moz-transform: translate(0%, -3%);\n -ms-transform: translate(0%, -3%);\n -o-transform: translate(0%, -3%);\n }\n}\n\n@keyframes slice6 {\n 0%,\n 100% {\n transform: translate(0, 0);\n -webkit-transform: translate(0, 0);\n -moz-transform: translate(0, 0);\n -ms-transform: translate(0, 0);\n -o-transform: translate(0, 0);\n }\n 50% {\n transform: translate(5%, 0%);\n -webkit-transform: translate(5%, 0%);\n -moz-transform: translate(5%, 0%);\n -ms-transform: translate(5%, 0%);\n -o-transform: translate(5%, 0%);\n }\n}\n"}

jolly-hound-16

👁 实时预览

📝 源代码