{"html":"

\n \n \n \n

\n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi laboriosam\n at voluptas minus culpa deserunt delectus sapiente inventore pariatur\n

\n","css":".card {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 320px;\n border-radius: 24px;\n line-height: 1.6;\n transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);\n}\n\n.content {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 24px;\n padding: 36px;\n border-radius: 22px;\n color: #ffffff;\n overflow: hidden;\n background: #0a3cff;\n transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);\n}\n\n.content::before {\n position: absolute;\n content: \"\";\n top: -4%;\n left: 50%;\n width: 90%;\n height: 90%;\n transform: translate(-50%);\n background: #ced8ff;\n z-index: -1;\n transform-origin: bottom;\n\n border-radius: inherit;\n transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);\n}\n\n.content::after {\n position: absolute;\n content: \"\";\n top: -8%;\n left: 50%;\n width: 80%;\n height: 80%;\n transform: translate(-50%);\n background: #e7ecff;\n z-index: -2;\n transform-origin: bottom;\n border-radius: inherit;\n transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);\n}\n\n.content svg {\n width: 48px;\n height: 48px;\n}\n\n.content .para {\n z-index: 1;\n opacity: 1;\n font-size: 18px;\n transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);\n}\n\n.content .link {\n z-index: 1;\n color: #fea000;\n text-decoration: none;\n font-family: inherit;\n font-size: 16px;\n transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);\n}\n\n.content .link:hover {\n text-decoration: underline;\n}\n\n.card:hover {\n transform: translate(0px, -16px);\n}\n\n.card:hover .content::before {\n rotate: -8deg;\n top: 0;\n width: 100%;\n height: 100%;\n}\n\n.card:hover .content::after {\n rotate: 8deg;\n top: 0;\n width: 100%;\n height: 100%;\n}\n"}

fuzzy-robin-67

👁 实时预览

📝 源代码