پیشنمایش زنده
کد HTML
<div class="card">
<div
class="relative bg-black w-[300px] sm:w-[350px] group transition-all duration-700 aspect-video flex items-center justify-center"
>
<div
class="transition-all flex flex-col items-center py-5 justify-start duration-300 group-hover:duration-1000 bg-white w-full h-full absolute group-hover:-translate-y-16"
>
<p class="text-xl sm:text-2xl font-semibold text-gray-500 font-serif">
Thank You
</p>
<p class="px-10 text-[10px] sm:text-[12px] text-gray-700">
It’s so nice that you had the time to view this idea
</p>
<p class="font-serif text-[10px] sm:text-[12px text-gray-700">
Wishing you a fantastic day ahead!
</p>
<p class="font-sans text-[10px] text-gray-700 pt-5">SMOOKYDEV</p>
</div>
<button
class="seal bg-rose-500 text-red-800 w-10 aspect-square rounded-full z-40 text-[10px] flex items-center justify-center font-semibold [clip-path:polygon(50%_0%,_80%_10%,_100%_35%,_100%_70%,_80%_90%,_50%_100%,_20%_90%,_0%_70%,_0%_35%,_20%_10%)] group-hover:opacity-0 transition-all duration-1000 group-hover:scale-0 group-hover:rotate-180 border-4 border-rose-900"
>
SMKY
</button>
<div
class="tp transition-all duration-1000 group-hover:duration-100 bg-neutral-800 absolute group-hover:[clip-path:polygon(50%_0%,_100%_0,_0_0)] w-full h-full [clip-path:polygon(50%_50%,_100%_0,_0_0)]"
></div>
<div
class="lft transition-all duration-700 absolute w-full h-full bg-neutral-900 [clip-path:polygon(50%_50%,_0_0,_0_100%)]"
></div>
<div
class="rgt transition-all duration-700 absolute w-full h-full bg-neutral-800 [clip-path:polygon(50%_50%,_100%_0,_100%_100%)]"
></div>
<div
class="btm transition-all duration-700 absolute w-full h-full bg-neutral-900 [clip-path:polygon(50%_50%,_100%_100%,_0_100%)]"
></div>
</div>
</div>
کد CSS
.absolute{position:absolute}.relative{position:relative}.z-40{z-index:40}.flex{display:flex}.aspect-square{aspect-ratio:1 / 1}.aspect-video{aspect-ratio:16 / 9}.h-full{height:100%}.w-10{width:2.5rem}.w-\[300px\]{width:300px}.w-full{width:100%}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.rounded-full{border-radius:9999px}.border-4{border-width:4px}.border-rose-900{--tw-border-opacity:1;border-color:rgb(136 19 55 / var(--tw-border-opacity))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0 / var(--tw-bg-opacity))}.bg-neutral-800{--tw-bg-opacity:1;background-color:rgb(38 38 38 / var(--tw-bg-opacity))}.bg-neutral-900{--tw-bg-opacity:1;background-color:rgb(23 23 23 / var(--tw-bg-opacity))}.bg-rose-500{--tw-bg-opacity:1;background-color:rgb(244 63 94 / var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.px-10{padding-left:2.5rem;padding-right:2.5rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.pt-5{padding-top:1.25rem}.font-sans{font-family:ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}.font-serif{font-family:ui-serif, Georgia, Cambria, "Times New Roman", Times, serif}.text-\[10px\]{font-size:10px}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-semibold{font-weight:600}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81 / var(--tw-text-opacity))}.text-red-800{--tw-text-opacity:1;color:rgb(153 27 27 / var(--tw-text-opacity))}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-1000{transition-duration:1000ms}.duration-300{transition-duration:300ms}.duration-700{transition-duration:700ms}.\[clip-path\:polygon\(50\%_0\%\2c _80\%_10\%\2c _100\%_35\%\2c _100\%_70\%\2c _80\%_90\%\2c _50\%_100\%\2c _20\%_90\%\2c _0\%_70\%\2c _0\%_35\%\2c _20\%_10\%\)\]{-webkit-clip-path:polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);clip-path:polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%)}.\[clip-path\:polygon\(50\%_50\%\2c _0_0\2c _0_100\%\)\]{-webkit-clip-path:polygon(50% 50%, 0 0, 0 100%);clip-path:polygon(50% 50%, 0 0, 0 100%)}.\[clip-path\:polygon\(50\%_50\%\2c _100\%_0\2c _0_0\)\]{-webkit-clip-path:polygon(50% 50%, 100% 0, 0 0);clip-path:polygon(50% 50%, 100% 0, 0 0)}.\[clip-path\:polygon\(50\%_50\%\2c _100\%_0\2c _100\%_100\%\)\]{-webkit-clip-path:polygon(50% 50%, 100% 0, 100% 100%);clip-path:polygon(50% 50%, 100% 0, 100% 100%)}.\[clip-path\:polygon\(50\%_50\%\2c _100\%_100\%\2c _0_100\%\)\]{-webkit-clip-path:polygon(50% 50%, 100% 100%, 0 100%);clip-path:polygon(50% 50%, 100% 100%, 0 100%)}.group:hover .group-hover\:-translate-y-16{--tw-translate-y:-4rem;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-180{--tw-rotate:180deg;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-0{--tw-scale-x:0;--tw-scale-y: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))}.group:hover .group-hover\:opacity-0{opacity:0}.group:hover .group-hover\:duration-100{transition-duration:100ms}.group:hover .group-hover\:duration-1000{transition-duration:1000ms}.group:hover .group-hover\:\[clip-path\:polygon\(50\%_0\%\2c _100\%_0\2c _0_0\)\]{-webkit-clip-path:polygon(50% 0%, 100% 0, 0 0);clip-path:polygon(50% 0%, 100% 0, 0 0)}@media (min-width: 640px){.sm\:w-\[350px\]{width:350px}.sm\:text-2xl{font-size:1.5rem;line-height:2rem}.sm\:text-\[12px\]{font-size:12px}}