{"html":"\n","css":".readmore-btn {\n width: fit-contentd;\n height: 55px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n background-color: rgb(186, 125, 255);\n border: none;\n border-radius: 10px;\n padding: 0px 15px;\n gap: 0px;\n transition: all 0.4s;\n}\n.book-wrapper {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n position: relative;\n width: 45px;\n height: 100%;\n}\n.book-wrapper .book-page {\n width: 50%;\n height: auto;\n position: absolute;\n}\n.readmore-btn:hover .book-page {\n animation: paging 0.4s linear infinite;\n transform-origin: left;\n}\n.readmore-btn:hover {\n background-color: rgb(159, 74, 255);\n}\n@keyframes paging {\n 0% {\n transform: rotateY(0deg) skewY(0deg);\n }\n 50% {\n transform: rotateY(90deg) skewY(-20deg);\n }\n 100% {\n transform: rotateY(180deg) skewY(0deg);\n }\n}\n.text {\n width: 105px;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 600;\n font-size: 15px;\n color: rgb(255, 255, 255);\n}\n"}

smooth-rabbit-93

👁 实时预览

📝 源代码