{"html":"

\n\t

","css":"@keyframes fadeInScale {\n 0% {\n opacity: 0;\n transform: scale(0) translateY(50%);\n }\n\n 90% {\n transform: scale(1.05);\n }\n\n 100% {\n opacity: 1;\n transform: scale(1) translateY(0);\n }\n}\n\n.container {\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.card {\n position: relative;\n width: 20em;\n background-color: #292929;\n transition: all .3s ease-in-out;\n}\n\n.card:hover {\n box-shadow: 0 10px 20px 10px rgba(black, .2);\n}\n\n.card__link {\n display: block;\n padding: 1em;\n text-decoration: none;\n}\n\n.card__icon {\n position: absolute;\n width: 4em;\n height: 4em;\n transition: all .3s ease-in-out;\n}\n\n.card:hover .card__icon {\n opacity: 0;\n transform: scale(0);\n}\n\n.card__media {\n padding: 2em 0;\n}\n\n.card__media\tsvg path {\n opacity: 0;\n transition: all .3s ease-in-out;\n transform-origin: center center;\n}\n\n.card:hover svg path {\n animation: fadeInScale .3s ease-in-out forwards;\n}\n\n.card:hover \tsvg path:nth-child(2) {\n animation-delay: .1s;\n}\n\n.card:hover \tsvg path:nth-child(3) {\n animation-delay: .2s;\n}\n\n.card__header {\n position: relative;\n}\n\n.card__header-title {\n margin: 0 0 .25em;\n color: white;\n}\n\n.card__header-meta {\n margin: 0;\n color: #999;\n}\n\n.card__header-icon {\n opacity: 0;\n position: absolute;\n right: 0;\n top: 50%;\n margin-top: -1em;\n transform: translateX(-20%);\n width: 2em;\n height: 2em;\n transition: all .3s ease-in-out;\n}\n\n.card:hover .card__header-icon {\n opacity: 1;\n transform: translateX(0);\n}"}

light-squid-68

👁 实时预览

📝 源代码