{"html":"\n

\n \n \n Hover me!\n

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n

\n \n \n\n","css":".absolute{position:absolute}.relative{position:relative}.-bottom-16{bottom:-4rem}.left-0{left:0px}.-z-10{z-index:-10}.h-28{height:7rem}.h-60{height:15rem}.h-80{height:20rem}.w-56{width:14rem}.w-64{width:16rem}.w-full{width:100%}.cursor-pointer{cursor:pointer}.overflow-hidden{overflow:hidden}.bg-blue-400{--tw-bg-opacity:1;background-color:rgb(96 165 250 / var(--tw-bg-opacity))}.bg-zinc-800{--tw-bg-opacity:1;background-color:rgb(39 39 42 / var(--tw-bg-opacity))}.p-5{padding:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-bold{font-weight:700}.text-gray-50{--tw-text-opacity:1;color:rgb(249 250 251 / var(--tw-text-opacity))}.opacity-0{opacity:0}.duration-500{transition-duration:500ms}.group:hover .group-hover\\:-translate-y-12{--tw-translate-y:-3rem;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\\:scale-110{--tw-scale-x:1.1;--tw-scale-y:1.1;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\\:bg-blue-900{--tw-bg-opacity:1;background-color:rgb(30 58 138 / var(--tw-bg-opacity))}.group:hover .group-hover\\:opacity-100{opacity:1}.group:hover .group-hover\\:opacity-50{opacity:0.5}"}

loud-dragon-12

👁 实时预览

📝 源代码