{"html":"

\n \n \n \n \n

\n\n

\n \n 3D Animation\n

Design, Dimension

\n \n \n \n

\n\n","css":".relative{position:relative}.mx-2{margin-left:0.5rem;margin-right:0.5rem}.flex{display:flex}.aspect-square{aspect-ratio:1 / 1}.w-10{width:2.5rem}.w-16{width:4rem}.w-44{width:11rem}.w-full{width:100%}.-rotate-45{--tw-rotate:-45deg;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))}.rotate-0{--tw-rotate:0deg;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))}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.place-content-between{place-content:space-between}.place-items-center{place-items:center}.items-center{align-items:center}.justify-center{justify-content:center}.gap-1{gap:0.25rem}.gap-5{gap:1.25rem}.rounded-full{border-radius:9999px}.bg-gradient-to-r{background-image:linear-gradient(to right, var(--tw-gradient-stops))}.from-gray-100{--tw-gradient-from:#f3f4f6 var(--tw-gradient-from-position);--tw-gradient-to:rgb(243 244 246 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.to-gray-300{--tw-gradient-to:#d1d5db var(--tw-gradient-to-position)}.fill-lime-600{fill:#65a30d}.object-cover{object-fit:cover}.object-center{object-position:center}.p-px{padding:1px}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.font-semibold{font-weight:600}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity))}.transition{transition-property:color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-300{transition-duration:300ms}.duration-700{transition-duration:700ms}.after\\:absolute::after{content:var(--tw-content);position:absolute}.after\\:bottom-0::after{content:var(--tw-content);bottom:0px}.after\\:left-0::after{content:var(--tw-content);left:0px}.after\\:h-0::after{content:var(--tw-content);height:0px}.after\\:h-0\\.5::after{content:var(--tw-content);height:0.125rem}.after\\:w-full::after{content:var(--tw-content);width:100%}.after\\:origin-bottom-left::after{content:var(--tw-content);transform-origin:bottom left}.after\\:scale-x-0::after{content:var(--tw-content);--tw-scale-x:0;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))}.after\\:transform::after{content:var(--tw-content);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))}.after\\:bg-lime-600::after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(101 163 13 / var(--tw-bg-opacity))}.after\\:duration-500::after{content:var(--tw-content);transition-duration:500ms}.after\\:ease-in-out::after{content:var(--tw-content);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.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\\:-rotate-\\[360deg\\]{--tw-rotate:-360deg;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\\:rotate-45{--tw-rotate:45deg;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\\:-skew-y-12{--tw-skew-y:-12deg;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\\:skew-x-12{--tw-skew-x:12deg;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))}@keyframes pulse{50%{opacity:.5}}.group:hover .group-hover\\:animate-pulse{animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite}.group:hover .group-hover\\:rounded-full{border-radius:9999px}.group:hover .group-hover\\:bg-lime-600{--tw-bg-opacity:1;background-color:rgb(101 163 13 / var(--tw-bg-opacity))}.group:hover .group-hover\\:fill-white{fill:#fff}.group:hover .group-hover\\:stroke-lime-600{stroke:#65a30d}.group:hover .group-hover\\:text-gray-200{--tw-text-opacity:1;color:rgb(229 231 235 / var(--tw-text-opacity))}.group:hover .group-hover\\:transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.group:hover .group-hover\\:duration-1000{transition-duration:1000ms}.group:hover .group-hover\\:duration-300{transition-duration:300ms}.group:hover .group-hover\\:ease-in-out{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.group:hover .group-hover\\:after\\:origin-bottom-left::after{content:var(--tw-content);transform-origin:bottom left}.group:hover .group-hover\\:after\\:scale-x-100::after{content:var(--tw-content);--tw-scale-x: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))}@media (prefers-color-scheme: dark){.dark\\:text-lime-500{--tw-text-opacity:1;color:rgb(132 204 22 / var(--tw-text-opacity))}.dark\\:after\\:bg-lime-500::after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(132 204 22 / var(--tw-bg-opacity))}}@media (min-width: 640px){.sm\\:w-28{width:7rem}.sm\\:w-52{width:13rem}.sm\\:text-xl{font-size:1.25rem;line-height:1.75rem}.group:hover .sm\\:group-hover\\:scale-150{--tw-scale-x:1.5;--tw-scale-y:1.5;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))}}"}

witty-otter-49

👁 实时预览

📝 源代码