{"html":"

\n \n

","css":".card {\n position: relative;\n width: 200px;\n height: 200px;\n background: lightgrey;\n border-radius: 30px;\n overflow: hidden;\n box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;\n transition: all 1s ease-in-out;\n}\n\n.background {\n position: absolute;\n inset: 0;\n background: radial-gradient(circle at 100% 107%, #ff89cc 0%, #9cb8ec 30%, #00ffee 60%, #62c2fe 100%);\n}\n\n.logo {\n position: absolute;\n right: 50%;\n bottom: 50%;\n transform: translate(50%, 50%);\n transition: all 0.6s ease-in-out;\n}\n\n.logo .logo-svg {\n fill: white;\n width: 30px;\n height: 30px;\n}\n\n.icon {\n display: inline-block;\n width: 20px;\n height: 20px;\n}\n\n.icon .svg {\n fill: rgba(255, 255, 255, 0.797);\n width: 100%;\n transition: all 0.5s ease-in-out;\n}\n\n.box {\n position: absolute;\n padding: 10px;\n text-align: right;\n background: rgba(255, 255, 255, 0.389);\n border-top: 2px solid rgb(255, 255, 255);\n border-right: 1px solid white;\n border-radius: 10% 13% 42% 0%/10% 12% 75% 0%;\n box-shadow: rgba(100, 100, 111, 0.364) -7px 7px 29px 0px;\n transform-origin: bottom left;\n transition: all 1s ease-in-out;\n}\n\n.box::before {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: inherit;\n opacity: 0;\n transition: all 0.5s ease-in-out;\n}\n\n.box:hover .svg {\n fill: white;\n}\n\n.box1 {\n width: 70%;\n height: 70%;\n bottom: -70%;\n left: -70%;\n}\n\n.box1::before {\n background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #ff53d4 60%, #62c2fe 90%);\n}\n\n.box1:hover::before {\n opacity: 1;\n}\n\n.box1:hover .icon .svg {\n filter: drop-shadow(0 0 5px white);\n}\n\n.box2 {\n width: 50%;\n height: 50%;\n bottom: -50%;\n left: -50%;\n transition-delay: 0.2s;\n}\n\n.box2::before {\n background: radial-gradient(circle at 30% 107%, #91e9ff 0%, #00ACEE 90%);\n}\n\n.box2:hover::before {\n opacity: 1;\n}\n\n.box2:hover .icon .svg {\n filter: drop-shadow(0 0 5px white);\n}\n\n.box3 {\n width: 30%;\n height: 30%;\n bottom: -30%;\n left: -30%;\n transition-delay: 0.4s;\n}\n\n.box3::before {\n background: radial-gradient(circle at 30% 107%, #969fff 0%, #b349ff 90%);\n}\n\n.box3:hover::before {\n opacity: 1;\n}\n\n.box3:hover .icon .svg {\n filter: drop-shadow(0 0 5px white);\n}\n\n.box4 {\n width: 10%;\n height: 10%;\n bottom: -10%;\n left: -10%;\n transition-delay: 0.6s;\n}\n\n.card:hover {\n transform: scale(1.1);\n}\n\n.card:hover .box {\n bottom: -1px;\n left: -1px;\n}\n\n.card:hover .logo {\n transform: translate(0, 0);\n bottom: 20px;\n right: 20px;\n}"}

massive-insect-5

👁 实时预览

📝 源代码

🔗 相关联的样式