{"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.eye {\n width: 55px;\n height: 44px;\n position: relative;\n background: transparent;\n border: 10px solid #141414;\n border-left: 0px;\n border-right: 0px;\n border-bottom: 4px solid transparent;\n border-radius: 100% 100% 100% 100%;\n transition: all 0.1s ease-in-out;\n}\n\n.eye1::before {\n content: \"\";\n position: absolute;\n width: 0px;\n opacity: 0;\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 transition: all 0.1s ease-in-out;\n}\n\n.eye2::before {\n content: \"\";\n position: absolute;\n width: 0px;\n opacity: 0;\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 transition: all 0.1s ease-in-out;\n}\n\n.eye1::after,\n.eye2::after {\n content: \"\";\n position: absolute;\n width: 25px;\n height: 44px;\n border-radius: 100% 100% 20px 20px;\n background: linear-gradient(\n to bottom,\n rgba(241, 148, 253, 0.453),\n rgba(202, 60, 227, 0.586),\n rgba(181, 6, 212, 0.432)\n );\n filter: blur(10px);\n transition: all 0.1s ease-in-out;\n}\n\n.eye1::after {\n left: 0;\n transform: rotate(20deg) translateX(-18px) translateY(18px);\n}\n\n.eye2::after {\n right: 0;\n transform: rotate(-20deg) translateX(18px) translateY(18px);\n}\n\n.emoji:hover .eye {\n width: 55px;\n height: 58px;\n position: relative;\n border: none;\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 transition: all 0.4s ease-in-out;\n}\n\n.emoji:hover .eye::before {\n width: 25px;\n opacity: 1;\n transition: all 0.8s ease-in-out;\n}\n\n.emoji:hover .eye::after {\n opacity: 0;\n transition: all 0.2s ease-in-out;\n}\n\n.emoji:active .eye {\n width: 55px;\n height: 44px;\n position: relative;\n background: transparent;\n border: 10px solid #141414;\n border-left: 0px;\n border-right: 0px;\n border-bottom: 4px solid transparent;\n border-radius: 100% 100% 100% 100%;\n transition: all 0.3s ease-in-out;\n box-shadow: none;\n}\n\n.emoji:active .eye::before {\n opacity: 0;\n transition: all 0.2s ease-in-out;\n}\n\n.emoji:active .eye::after {\n opacity: 1;\n background: linear-gradient(to bottom, #76a0ab, #aec2c8, #76a0ab);\n transition: all 0.1s ease-in-out;\n filter: blur(0px);\n box-shadow:\n inset 5px 5px 15px rgba(88, 243, 238, 0.422),\n inset -7px -7px 10px rgba(2, 59, 64, 0.316);\n}\n\n.mouth {\n width: 80%;\n height: 55px;\n position: relative;\n background: transparent;\n margin-top: -20px;\n border: 12px solid #000000;\n border-left: 0px;\n border-right: 0px;\n border-top: 4px solid transparent;\n border-radius: 100% 100% 100% 100%;\n box-shadow: inset -2px -7px 2px rgb(69, 69, 69);\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 opacity: 0;\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 opacity: 0;\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 opacity: 0;\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\n.emoji:hover .mouth {\n width: 85%;\n height: 65px;\n display: flex;\n margin-top: 0px;\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.emoji:hover .mask {\n opacity: 1;\n transition: all 0.4s ease-in-out;\n}\n\n.emoji:hover .teeth {\n opacity: 1;\n transition: all 0.4s ease-in-out;\n}\n\n.emoji:hover .toungue {\n opacity: 1;\n transition: all 0.5s ease-in-out;\n}\n\n.emoji:active .mouth {\n width: 90%;\n height: 60px;\n}\n"}

massive-termite-55

👁 实时预览

📝 源代码