{"html":"

\n \n

","css":".chat {\n display: flex;\n position: relative;\n}\n\n.background {\n background-color: #1950ff;\n border-radius: 50%;\n box-shadow: 0 2.1px 1.3px rgba(0, 0, 0, 0.044),\n 0 5.9px 4.2px rgba(0, 0, 0, 0.054), 0 12.6px 9.5px rgba(0, 0, 0, 0.061),\n 0 25px 20px rgba(0, 0, 0, 0.1);\n height: 80px;\n left: 10px;\n position: absolute;\n top: 10px;\n width: 80px;\n}\n\n.chat-bubble {\n cursor: pointer;\n position: relative;\n}\n\n.bubble {\n transform-origin: 50%;\n transition: transform 500ms cubic-bezier(0.17, 0.61, 0.54, 0.9);\n}\n\n.line {\n fill: none;\n stroke: #ffffff;\n stroke-width: 2.75;\n stroke-linecap: round;\n transition: stroke-dashoffset 500ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.line1 {\n stroke-dasharray: 60 90;\n stroke-dashoffset: -20;\n}\n\n.line2 {\n stroke-dasharray: 67 87;\n stroke-dashoffset: -18;\n}\n\n.circle {\n fill: #ffffff;\n stroke: none;\n transform-origin: 50%;\n transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.active .bubble {\n transform: translateX(24px) translateY(4px) rotate(45deg);\n}\n\n.active .line1 {\n stroke-dashoffset: 21;\n}\n\n.active .line2 {\n stroke-dashoffset: 30;\n}\n\n.active .circle {\n transform: scale(0);\n}"}

funny-quail-20

👁 实时预览

📝 源代码