{"html":"

\n\t\n

","css":".pl1 {\n display: block;\n width: 8em;\n height: 8em;\n}\n\n.pl1__g,\n .pl1__rect {\n animation: pl1-a 1.5s cubic-bezier(0.65,0,0.35,1) infinite;\n}\n\n.pl1__g {\n transform-origin: 64px 64px;\n}\n\n.pl1__rect:first-child {\n animation-name: pl1-b;\n}\n\n.pl1__rect:nth-child(2) {\n animation-name: pl1-c;\n}\n\n@keyframes pl1-a {\n from {\n transform: rotate(0);\n }\n\n 80%,\n to {\n animation-timing-function: steps(1,start);\n transform: rotate(90deg);\n }\n}\n\n@keyframes pl1-b {\n from {\n animation-timing-function: cubic-bezier(0.33,0,0.67,0);\n width: 40px;\n height: 40px;\n }\n\n 20% {\n animation-timing-function: steps(1,start);\n width: 40px;\n height: 0;\n }\n\n 60% {\n animation-timing-function: cubic-bezier(0.65,0,0.35,1);\n width: 0;\n height: 40px;\n }\n\n 80%,\n to {\n width: 40px;\n height: 40px;\n }\n}\n\n@keyframes pl1-c {\n from {\n animation-timing-function: cubic-bezier(0.33,0,0.67,0);\n width: 40px;\n height: 40px;\n transform: translate(0,48px);\n }\n\n 20% {\n animation-timing-function: cubic-bezier(0.33,1,0.67,1);\n width: 40px;\n height: 88px;\n transform: translate(0,0);\n }\n\n 40% {\n animation-timing-function: cubic-bezier(0.33,0,0.67,0);\n width: 40px;\n height: 40px;\n transform: translate(0,0);\n }\n\n 60% {\n animation-timing-function: cubic-bezier(0.33,1,0.67,1);\n width: 88px;\n height: 40px;\n transform: translate(0,0);\n }\n\n 80%,\n to {\n width: 40px;\n height: 40px;\n transform: translate(48px,0);\n }\n}"}

big-lionfish-7

👁 实时预览

📝 源代码