{"html":"

\n\n

\n \n \n \n \n \n

Layers

\n\n \n \n \n \n \n \n \n \n \n

\n","css":".morph-card {\n position: relative;\n width: 180px;\n height: 220px;\n display: flex;\n align-items: center;\n justify-content: center;\n filter: url(#morphGoo);\n cursor: pointer;\n}\n\n/* Основные блобы формируют карточку */\n.morph-blob {\n position: absolute;\n background: #0a0a0a;\n border-radius: 50%;\n transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);\n}\n\n.morph-blob-1 {\n width: 180px;\n height: 180px;\n top: 20px;\n left: 0;\n}\n\n.morph-blob-2 {\n width: 100px;\n height: 100px;\n top: -10px;\n left: 40px;\n}\n\n.morph-blob-3 {\n width: 80px;\n height: 80px;\n bottom: -5px;\n left: 50px;\n}\n\n/* При hover — блобы перестраиваются */\n.morph-card:hover .morph-blob-1 {\n border-radius: 30%;\n width: 170px;\n height: 160px;\n top: 30px;\n left: 5px;\n transform: rotate(-3deg);\n}\n\n.morph-card:hover .morph-blob-2 {\n width: 70px;\n height: 70px;\n top: -20px;\n left: -15px;\n transform: rotate(10deg);\n}\n\n.morph-card:hover .morph-blob-3 {\n width: 60px;\n height: 60px;\n bottom: -20px;\n left: 130px;\n transform: rotate(-8deg);\n}\n\n/* Контент */\n.morph-content {\n position: relative;\n z-index: 2;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 12px;\n color: #fff;\n transition: all 0.5s ease;\n}\n\n.morph-icon {\n width: 40px;\n height: 40px;\n color: rgba(255, 255, 255, 0.7);\n transition: all 0.5s ease;\n}\n\n.morph-icon svg {\n width: 100%;\n height: 100%;\n}\n\n.morph-card:hover .morph-icon {\n color: #fff;\n transform: translateY(-5px);\n filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));\n}\n\n.morph-label {\n font-family: \"Segoe UI\", system-ui, sans-serif;\n font-size: 13px;\n font-weight: 500;\n color: rgba(255, 255, 255, 0.4);\n letter-spacing: 3px;\n text-transform: uppercase;\n transition: all 0.5s ease;\n}\n\n.morph-card:hover .morph-label {\n color: rgba(255, 255, 255, 0.6);\n letter-spacing: 5px;\n}\n\n.morph-count {\n font-family: \"Segoe UI\", system-ui, sans-serif;\n font-size: 36px;\n font-weight: 300;\n color: #fff;\n transition: all 0.5s ease;\n}\n\n.morph-card:hover .morph-count {\n transform: scale(1.1);\n text-shadow: 0 0 20px rgba(255, 255, 255, 0.2);\n}\n\n/* Active — сжатие */\n.morph-card:active .morph-blob {\n transform: scale(0.92) !important;\n transition-duration: 0.15s;\n}\n"}

fuzzy-parrot-81

👁 实时预览

📝 源代码