{"html":"

\n \n \n \n \n \n \n \n \n \n \n \n

\n","css":".button {\n cursor: inherit;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n border: solid 4px rgba(255, 255, 255, 0);\n background-color: hsl(300, 10%, 8%);\n font-size: 20px;\n color: white;\n border-radius: 50px;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100px;\n}\n.button:before {\n content: \"\";\n position: absolute;\n top: 0;\n transform: translateY(-100%);\n width: 0;\n height: 0;\n border-top: solid 10px rgba(255, 0, 0, 0);\n border-bottom: solid 10px hsl(300, 10%, 8%);\n border-right: solid 10px rgba(255, 0, 0, 0);\n border-left: solid 10px rgba(255, 0, 0, 0);\n}\n.button.up {\n z-index: 2;\n}\n.click .button .speak:nth-child(n + 2) {\n display: none;\n}\nbutton:hover,\n.click span:nth-child(5):hover ~ button,\n.click span:nth-child(6):hover ~ button {\n left: 100%;\n top: 0;\n transform: translateX(-100%);\n}\nbutton:hover,\n.click span:nth-child(5):hover ~ .button .speak:is(.dblink, .rblink),\n.click span:nth-child(6):hover ~ .button .speak:is(.dblink, .rblink) {\n display: none !important;\n}\nbutton:hover,\n.click span:nth-child(5):hover ~ .button .speak:is(.doblink),\n.click span:nth-child(6):hover ~ .button .speak:is(.doblink) {\n display: flex !important;\n}\nbutton:hover,\n.click span:nth-child(2):hover ~ button,\nbutton:hover,\n.click span:nth-child(3):hover ~ button {\n left: 0%;\n top: 0;\n transform: translateX(0%);\n}\nbutton:hover,\n.click span:nth-child(2):hover ~ .button .speak:is(.dblink, .hihi),\n.click span:nth-child(3):hover ~ .button .speak:is(.dblink, .hihi) {\n display: none !important;\n}\nbutton:hover,\n.click span:nth-child(2):hover ~ .button .speak:is(.rblink),\n.click span:nth-child(3):hover ~ .button .speak:is(.rblink) {\n display: flex !important;\n}\nbutton:hover,\n.click span:nth-child(1):hover ~ button,\nbutton:hover,\n.click span:nth-child(4):hover ~ button {\n top: 100%;\n left: 0;\n transform: translateY(-100%);\n}\nbutton:hover,\n.click span:nth-child(1):hover ~ .button .speak:is(.dblink, hihi, rblink),\n.click span:nth-child(4):hover ~ .button .speak:is(.dblink, hihi, rblink) {\n display: none !important;\n}\nbutton:hover,\n.click span:nth-child(1):hover ~ .button .speak:is(.ublink),\n.click span:nth-child(4):hover ~ .button .speak:is(.ublink) {\n display: flex !important;\n}\n.click {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 0px;\n position: relative;\n border-radius: 5px;\n}\n.click span {\n width: 80px;\n height: 80px;\n background-color: transparent;\n display: flex;\n}\n.shadow {\n color: transparent;\n transition: all 0.5s ease;\n z-index: 1;\n pointer-events: none;\n filter: blur(14px);\n background-color: hsla(240, 24%, 12%, 0.384);\n}\n.speak {\n font-size: 15px;\n}\n.wrap {\n position: relative;\n width: 100px;\n height: 40px;\n margin: 0 2rem;\n color: black;\n line-height: 40px;\n font-size: 2rem;\n text-align: center;\n font-weight: 400;\n margin-bottom: 0;\n display: flex;\n gap: 5px;\n}\n.eye {\n position: relative;\n margin: auto;\n top: 0;\n bottom: 0;\n background: #fff;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n display: inline-block;\n animation: double-blink 4s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;\n overflow: hidden;\n}\n@keyframes double-blink {\n 0%,\n 8% {\n height: 40px;\n }\n 10%,\n 12% {\n height: 10px;\n }\n 13% {\n height: 40px;\n }\n 14%,\n 16% {\n height: 0;\n }\n 18%,\n 100% {\n height: 40px;\n }\n}\n.eye:before {\n content: \"\";\n position: absolute;\n margin: auto;\n width: 10px;\n height: 10px;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n border-radius: 50%;\n background: rgba(20, 20, 20, 1);\n}\n.down:before {\n animation: downb 4s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;\n}\n@keyframes downb {\n 0%,\n 10% {\n top: 0;\n left: -10px;\n }\n 20%,\n 40% {\n top: 50%;\n left: -10px;\n }\n 50%,\n 100% {\n top: 0;\n left: -10px;\n }\n}\n.right-blink:before {\n animation: rightb 4s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;\n}\n@keyframes rightb {\n 0%,\n 10% {\n top: 0;\n left: 50%;\n }\n 20%,\n 40% {\n top: 50%;\n left: 50%;\n }\n 50%,\n 100% {\n top: 0;\n left: 50%;\n }\n}\n.up-blink:before {\n animation: upb 4s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;\n}\n@keyframes upb {\n 0%,\n 10% {\n top: 0;\n left: 0%;\n }\n 20%,\n 40% {\n top: -50%;\n left: 0%;\n }\n 50%,\n 100% {\n top: 0;\n left: 0%;\n }\n}\n"}

bitter-dragon-16

👁 实时预览

📝 源代码