{"html":"

Come Deeper\n

\n\n

It's
Deep
In Here...\n

","css":".card {\n width: 190px;\n height: 254px;\n background: #d3d3d3;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.one {\n width: 90%;\n height: 95%;\n background-color: #c0c0c0;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 3%;\n}\n\n.two {\n width: 90%;\n height: 95%;\n display: flex;\n justify-content: center;\n align-items: center;\n opacity: 0;\n border-radius: 3%;\n background-color: #9c9c9c;\n transition: 1s;\n transition-delay: 0.2s;\n}\n\n.three {\n width: 90%;\n height: 95%;\n display: flex;\n justify-content: center;\n align-items: center;\n opacity: 0;\n border-radius: 3%;\n background-color: #797979;\n transition: 0.9s;\n transition-delay: 0.2s;\n}\n\n.four {\n width: 90%;\n height: 95%;\n display: flex;\n justify-content: center;\n align-items: center;\n color: #ececec;\n opacity: 0;\n border-radius: 3%;\n background-color: #5a5a5a;\n transition: 0.8s;\n transition-delay: 0.2s;\n}\n\n.five {\n width: 90%;\n height: 95%;\n display: flex;\n justify-content: center;\n align-items: center;\n color: #ececec;\n opacity: 0;\n border-radius: 3%;\n background-color: #424242;\n transition: 0.7s;\n transition-delay: 0.2s;\n}\n\n.six {\n width: 90%;\n height: 95%;\n color: #ececec;\n text-align: center;\n opacity: 0;\n border-radius: 3%;\n background-color: #302f2f;\n transition: 0.6s;\n transition-delay: 0.2s;\n}\n\n.text2 {\n padding-top: 50%;\n transform: translateY(-5em);\n transition: 0.2s;\n opacity: 0;\n}\n\n.card:hover .two {\n opacity: 1;\n transition: 0.4s;\n}\n\n.card:hover .three {\n opacity: 1;\n transition: 0.5s;\n}\n\n.card:hover .four {\n opacity: 1;\n transition: 0.6s;\n}\n\n.card:hover .five {\n opacity: 1;\n transition: 0.7s;\n}\n\n.card:hover .six {\n opacity: 1;\n transition: 0.8s;\n}\n\n.card:hover .text1 {\n opacity: 0;\n}\n\n.card:hover .text2 {\n transform: translateY(2em);\n transition-delay: 0.5s;\n opacity: 1;\n}\n\n.text1 {\n position: absolute;\n opacity: 1;\n}\n"}

quick-bird-33

👁 实时预览

📝 源代码