{"html":"\n","css":".archiveBtn {\n width: 76.5px;\n height: 76.5px;\n border-radius: 22.1px;\n background-color: rgb(86, 88, 130);\n border: 5.1px solid rgb(180, 183, 200);\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: 0px 8.5px 17px rgba(0, 0, 0, 0.123);\n cursor: pointer;\n overflow: hidden;\n transition: all 0.3s;\n position: relative;\n}\n.archiveBtn::before {\n content: \"\";\n width: 340%;\n height: 340%;\n background-color: rgb(37, 61, 100);\n position: absolute;\n z-index: 1;\n transform: scale(0);\n transition: all 0.3s;\n border-radius: 50%;\n filter: blur(17px);\n}\n.archiveBtn:hover::before {\n transform: scale(1);\n}\n.archiveBtn:hover {\n box-shadow: 0px 8.5px 17px rgba(0, 0, 0, 0.336);\n background-color: rgb(37, 100, 61);\n}\n\n.archiveBtn svg {\n height: 3.1875em;\n width: 3.1875em;\n fill: white;\n z-index: 3;\n transition: all 0.2s;\n transform-origin: bottom;\n}\n\n.archiveBtn svg .togrow {\n transform: translateX(53.125em) translateY(45.8125em);\n transition:\n transform 0.3s ease-in-out,\n fill 0.3s ease-in-out;\n}\n\n.archiveBtn:hover svg .togrow {\n transform: translateX(53.125em) translateY(22.25em) scaleY(5.5);\n fill: #8b8d8b;\n stroke: white;\n stroke-width: 2px;\n transition:\n transform 0.3s ease-in-out,\n fill 0.3s ease-in-out;\n}\n\n.archiveBtn svg .togrow2 {\n transform: translateX(45.5em) translateY(53.4375em);\n transition:\n transform 0.3s ease-in-out,\n fill 0.3s ease-in-out;\n}\n\n.archiveBtn:hover svg .togrow2 {\n transform: translateX(45.9375em) translateY(32.25em) scaleY(4.5);\n fill: #8b8d8b;\n stroke: white;\n stroke-width: 2px;\n transition:\n transform 0.3s ease-in-out,\n fill 0.3s ease-in-out;\n}\n"}

tiny-impala-99

👁 实时预览

📝 源代码