{"html":"\n","css":".emoji {\n width: 222px;\n height: 222px;\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 15px;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n border: none;\n margin: 0;\n padding: 0px 45px;\n padding-top: 15px;\n outline: none;\n cursor: pointer;\n background: linear-gradient(130deg, #e8c486, #cb945b);\n box-shadow:\n inset 4px 4px 8px #ffe1ae,\n inset -4px -4px 8px #7f6537;\n transition: all 0.2s ease-in-out;\n overflow: hidden;\n}\n\n.emoji:hover {\n box-shadow:\n inset 2px 2px 6px #ffe1ae,\n inset -2px -2px 6px #7f6537;\n transform: scale(1.05);\n transition: all 0.4s ease-in-out;\n}\n\n.emoji:active {\n box-shadow: none;\n transform: scale(1.02);\n transition: all 0.2s ease-in-out;\n}\n\n.eyes {\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.eye1,\n.eye2 {\n width: 55px;\n height: 58px;\n position: relative;\n background: linear-gradient(\n 120deg,\n rgb(255, 255, 255),\n rgb(238, 238, 238),\n rgb(234, 234, 234)\n );\n border-radius: 50%;\n box-shadow:\n -2px -2px 2px rgba(190, 190, 190, 0.686) inset,\n 2px 2px 2px rgba(0, 0, 0, 0.268);\n}\n\n.eye1::before {\n content: \"\";\n position: absolute;\n width: 25px;\n height: 26px;\n background: linear-gradient(to bottom, rgb(153, 148, 148), black);\n top: 50%;\n left: 54%;\n transform: translateX(-50%) translateY(-50%);\n border-radius: 50%;\n box-shadow:\n inset 3px 3px 4px rgba(0, 0, 0, 0.345),\n 2px 2px 4px rgba(0, 0, 0, 0.282);\n}\n\n.eye2::before {\n content: \"\";\n position: absolute;\n width: 25px;\n height: 26px;\n background: linear-gradient(310deg, rgb(0, 0, 0), rgb(141, 136, 136));\n top: 50%;\n left: 54%;\n transform: translateX(-50%) translateY(-50%);\n border-radius: 50%;\n box-shadow:\n inset 3px 3px 4px rgba(0, 0, 0, 0.345),\n 2px 2px 4px rgba(0, 0, 0, 0.282);\n}\n\n.mouth {\n width: 85%;\n height: 65px;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n background: linear-gradient(170deg, #a66d31, #d1bb95);\n border: none;\n border-radius: 70px 70px 300px 300px;\n transition:\n width 0.3s ease,\n transform 0.3s ease,\n border-radius 0.3s ease;\n z-index: 0;\n box-shadow:\n inset 2px 2px 10px #a66d31,\n inset -4px -4px 15px #ffe9c4;\n overflow: hidden;\n}\n\n.mouth .mask {\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: center;\n width: 90%;\n height: 85%;\n background: #3b0a02;\n border-radius: 50px 50px 300px 300px;\n z-index: 1;\n overflow: hidden;\n}\n\n.teeth {\n width: 100%;\n height: 30px;\n position: absolute;\n top: -8px;\n background: linear-gradient(\n to bottom,\n rgb(237, 237, 237),\n rgb(255, 248, 248)\n );\n border-radius: 10px 10px 10px 10px;\n box-shadow: 5px 10px 10px #00000080 inset;\n}\n\n.toungue {\n width: 52%;\n height: 30px;\n position: absolute;\n bottom: -8px;\n background: linear-gradient(to top, #dda8ba, #894151);\n border-radius: 50px 50px 20px 20px;\n box-shadow: 4px 4px 7px #00000050 inset;\n}\n"}

dull-cow-17

👁 实时预览

📝 源代码