{"html":"

\n\n","css":".jelly-triangle {\n --uib-size: 2.8rem;\n --uib-speed: 1.75s;\n --uib-color: #183153;\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 box-shadow: 0 0 20px rgba(18, 31, 53, 0.3);\n}\n\n.jelly-triangle__dot {\n top: 6%;\n left: 30%;\n animation: grow7132 var(--uib-speed) ease infinite;\n}\n\n.jelly-triangle::before {\n bottom: 6%;\n right: 0;\n animation: grow7132 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: grow7132 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: triangulate6214 var(--uib-speed) ease infinite;\n}\n\n.jelly-maker {\n width: 0;\n height: 0;\n position: absolute;\n}\n\n@keyframes triangulate6214 {\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 grow7132 {\n 0%,\n 100% {\n transform: scale(1.5);\n }\n\n 20%,\n 70% {\n transform: none;\n }\n}"}

hot-lionfish-16

👁 实时预览

📝 源代码