{"html":"\n

\n \n Created with Sketch.\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

Education

\n\n","css":".education {\n --bg-color: #ffd861;\n --bg-color-light: #ffeeba;\n --text-color-hover: #4c5656;\n --box-shadow-color: rgba(255, 215, 97, 0.48);\n}\n\n.credentialing {\n --bg-color: #b8f9d3;\n --bg-color-light: #e2fced;\n --text-color-hover: #4c5656;\n --box-shadow-color: rgba(184, 249, 211, 0.48);\n}\n\n.wallet {\n --bg-color: #ceb2fc;\n --bg-color-light: #f0e7ff;\n --text-color-hover: #fff;\n --box-shadow-color: rgba(206, 178, 252, 0.48);\n}\n\n.human-resources {\n --bg-color: #dce9ff;\n --bg-color-light: #f1f7ff;\n --text-color-hover: #4c5656;\n --box-shadow-color: rgba(220, 233, 255, 0.48);\n}\n\n.card {\n width: 220px;\n height: 321px;\n background: #fff;\n border-top-right-radius: 10px;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n position: relative;\n box-shadow: 0 14px 26px rgba(0, 0, 0, 0.04);\n transition: all 0.3s ease-out;\n text-decoration: none;\n}\n\n.card:hover {\n transform: translateY(-5px) scale(1.005) translateZ(0);\n box-shadow: 0 24px 36px rgba(0, 0, 0, 0.11),\n 0 24px 46px var(--box-shadow-color);\n}\n\n.card:hover .overlay {\n transform: scale(4) translateZ(0);\n}\n\n.card:hover .circle {\n border-color: var(--bg-color-light);\n background: var(--bg-color);\n}\n\n.card:hover .circle:after {\n background: var(--bg-color-light);\n}\n\n.card:hover p {\n color: var(--text-color-hover);\n}\n\n.card:active {\n transform: scale(1) translateZ(0);\n box-shadow: 0 15px 24px rgba(0, 0, 0, 0.11),\n 0 15px 24px var(--box-shadow-color);\n}\n\n.card p {\n font-size: 17px;\n color: #4c5656;\n margin-top: 30px;\n z-index: 1000;\n transition: color 0.3s ease-out;\n}\n\n.circle {\n width: 136px;\n height: 136px;\n border-radius: 50%;\n background: #fff;\n border: 2px solid var(--bg-color);\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n z-index: 1;\n transition: all 0.3s ease-out;\n}\n\n.circle:after {\n content: \"\";\n width: 118px;\n height: 118px;\n display: block;\n position: absolute;\n background: var(--bg-color);\n border-radius: 50%;\n top: 7px;\n left: 7px;\n transition: opacity 0.3s ease-out;\n}\n\n.circle svg {\n z-index: 10000;\n transform: translateZ(0);\n}\n\n.overlay {\n width: 118px;\n position: absolute;\n height: 118px;\n border-radius: 50%;\n background: var(--bg-color);\n top: 70px;\n left: 50px;\n z-index: 0;\n transition: transform 0.3s ease-out;\n}\n"}

friendly-octopus-41

👁 实时预览

📝 源代码