{"html":"

\n\n

\n \n \n \n

UI / UX Creative Desing

\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse fuga\n adipisicing elit\n

\n","css":".card {\n width: 280px;\n background: #f5f5f5;\n border-radius: 10px;\n padding: 50px 30px;\n position: relative;\n overflow: hidden;\n align-items: center;\n justify-content: center;\n box-shadow: 0 0 10px #4445;\n cursor: pointer;\n transition: all 0.4s ease-in-out;\n}\n\n.icon,\n.heading,\n.content {\n position: relative;\n z-index: 5;\n transition: all 0.5s;\n}\n\n.icon {\n width: 40px;\n fill: rgb(139, 92, 246);\n margin-bottom: 20px;\n}\n\n.heading {\n font-size: 20px;\n font-weight: 800;\n margin-bottom: 20px;\n}\n\n.number {\n position: absolute;\n top: -90px;\n right: -85px;\n padding: 80px 100px 30px 30px;\n background: rgb(139, 92, 246);\n border-radius: 100%;\n z-index: 5;\n}\n\n.number .text {\n font-size: 28px;\n font-weight: 600;\n color: #fff;\n}\n\n.text {\n margin-top: 20px;\n}\n\n.number::after {\n content: \"\";\n width: 50px;\n height: 50px;\n background: rgb(139, 92, 246);\n position: absolute;\n border-radius: 100%;\n top: 50%;\n right: 50%;\n transition: all 0.5s;\n transform: translateX(50%) translateY(-50%);\n z-index: -1;\n}\n\n.card:hover {\n scale: 1.02;\n box-shadow: 0 5px 20px #444e;\n}\n\n.card:hover .number::after {\n width: 900px;\n height: 900px;\n}\n\n.card:hover .icon,\n.card:hover .heading,\n.card:hover .content {\n color: #f5f5f5;\n fill: #f5f5f5;\n}\n"}

pink-bear-65

👁 实时预览

📝 源代码