{"html":"

\n","css":".jelly-triangle {\n --uib-size: 42px;\n --uib-speed: 1.25s;\n --uib-color: #512727;\n position: relative;\n height: var(--uib-size);\n width: var(--uib-size);\n filter: url('#uib-jelly-triangle-ooze');\n}\n\n.jelly-triangle__dot,\n.jelly-triangle::before,\n.jelly-triangle::after {\n content: '';\n position: absolute;\n width: 33%;\n height: 33%;\n background: var(--uib-color);\n border-radius: 100%;\n}\n\n.jelly-triangle__dot {\n top: 6%;\n left: 30%;\n animation: grow0 var(--uib-speed) ease infinite;\n}\n\n.jelly-triangle::before {\n bottom: 6%;\n right: 0;\n animation: grow0 var(--uib-speed) ease calc(var(--uib-speed) * -0.666)\n infinite;\n}\n\n.jelly-triangle::after {\n bottom: 6%;\n left: 0;\n animation: grow0 var(--uib-speed) ease calc(var(--uib-speed) * -0.333)\n infinite;\n}\n\n.jelly-triangle__traveler {\n position: absolute;\n top: 6%;\n left: 30%;\n width: 33%;\n height: 33%;\n background: var(--uib-color);\n border-radius: 100%;\n animation: triangulate var(--uib-speed) ease infinite;\n}\n\n.jelly-maker {\n width: 0;\n height: 0;\n position: absolute;\n}\n\n@keyframes triangulate {\n 0%,\n 100% {\n transform: none;\n }\n\n 33.333% {\n transform: translate(120%, 175%);\n }\n\n 66.666% {\n transform: translate(-95%, 175%);\n }\n}\n\n@keyframes grow0 {\n 0%,\n 100% {\n transform: scale(1.5);\n }\n\n 20%,\n 70% {\n transform: none;\n }\n}"}

lovely-kangaroo-88

👁 实时预览

📝 源代码