{"html":"

Steve Jobs

CEO & Co-Founder

\n \n

","css":".card {\n width: 190px;\n height: 254px;\n background: #f5f5f5;\n padding: 2rem 1.5rem;\n transition: box-shadow .3s ease, transform .2s ease;\n}\n\n.card-info {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n transition: transform .2s ease, opacity .2s ease;\n}\n\n/*Image*/\n.card-avatar {\n --size: 60px;\n background: linear-gradient(to top, #f1e1c1 0%, #fcbc97 100%);\n width: var(--size);\n height: var(--size);\n border-radius: 50%;\n transition: transform .2s ease;\n margin-bottom: 1rem;\n}\n\n\n/*Card footer*/\n.card-social {\n transform: translateY(200%);\n display: flex;\n justify-content: space-around;\n width: 100%;\n opacity: 0;\n transition: transform .2s ease, opacity .2s ease;\n}\n\n.card-social__item {\n list-style: none;\n}\n\n.card-social__item svg {\n display: block;\n height: 18px;\n width: 18px;\n fill: #515F65;\n cursor: pointer;\n transition: fill 0.2s ease ,transform 0.2s ease;\n}\n\n/*Text*/\n.card-title {\n color: #333;\n font-size: 1.5em;\n font-weight: 600;\n line-height: 2rem;\n}\n\n.card-subtitle {\n color: #859ba8;\n font-size: 0.8em;\n}\n\n/*Hover*/\n.card:hover {\n box-shadow: 0 8px 50px #23232333;\n}\n\n.card:hover .card-info {\n transform: translateY(-5%);\n}\n\n.card:hover .card-social {\n transform: translateY(100%);\n opacity: 1;\n}\n\n.card-social__item svg:hover {\n fill: #232323;\n transform: scale(1.1);\n}\n\n.card-avatar:hover {\n transform: scale(1.1);\n}"}

weak-lionfish-37

👁 实时预览

📝 源代码