پیشنمایش زنده
کد HTML
<div
class="w-64 h-64 bg-neutral-800 group relative rounded-xl flex justify-center items-center overflow-hidden"
>
<div class="w-24 h-24 bottom-8 absolute bg-red-300">
<div
class="w-24 h-24 absolute bg-neutral-50 duration-500 shadow-2xl [box-shadow:0px_-75px_55px_-30px_#262626] group-hover:[box-shadow:0px_-75px_95px_0px_#FDE047]"
>
<div class="w-24 h-24 bg-neutral-50 shadow-inner shadow-yellow-200"></div>
<div
class="w-24 h-24 bg-neutral-50 absolute -bottom-12 rounded-full [transform:_rotateX(80deg)]"
></div>
<div
class="w-24 h-24 bg-yellow-400 border-4 border-yellow-300 absolute -top-12 rounded-full [transform:_rotateX(80deg)]"
></div>
</div>
<svg
class="group-hover:-skew-x-2 duration-500 absolute rounded-full shadow-yellow-200 -top-12 left-4 fill-yellow-300 w-16 h-16"
height="100"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 100 100"
width="100"
x="0"
xmlns="http://www.w3.org/2000/svg"
y="0"
>
<path
class=""
d="M59.5,20.5a3.9,3.9,0,0,0-2.5-2,4.3,4.3,0,0,0-3.3.5,11.9,11.9,0,0,0-3.2,3.5,26,26,0,0,0-2.3,4.4,76.2,76.2,0,0,0-3.3,10.8,120.4,120.4,0,0,0-2.4,14.2,11.4,11.4,0,0,1-3.8-4.2c-1.3-2.7-1.5-6.1-1.5-10.5a4,4,0,0,0-2.5-3.7,3.8,3.8,0,0,0-4.3.9,27.7,27.7,0,1,0,39.2,0,62.4,62.4,0,0,1-5.3-5.8A42.9,42.9,0,0,1,59.5,20.5ZM58.4,70.3a11.9,11.9,0,0,1-20.3-8.4s3.5,2,9.9,2c0-4,2-15.9,5-17.9a21.7,21.7,0,0,0,5.4,7.5,11.8,11.8,0,0,1,3.5,8.4A12,12,0,0,1,58.4,70.3Z"
fill-rule="evenodd"
></path>
</svg>
</div>
</div>
کد CSS
.absolute{position:absolute}.relative{position:relative}.-bottom-12{bottom:-3rem}.-top-12{top:-3rem}.bottom-8{bottom:2rem}.left-4{left:1rem}.flex{display:flex}.h-16{height:4rem}.h-24{height:6rem}.h-64{height:16rem}.w-16{width:4rem}.w-24{width:6rem}.w-64{width:16rem}.items-center{align-items:center}.justify-center{justify-content:center}.overflow-hidden{overflow:hidden}.rounded-full{border-radius:9999px}.rounded-xl{border-radius:0.75rem}.border-4{border-width:4px}.border-yellow-300{--tw-border-opacity:1;border-color:rgb(253 224 71 / var(--tw-border-opacity))}.bg-neutral-50{--tw-bg-opacity:1;background-color:rgb(250 250 250 / var(--tw-bg-opacity))}.bg-neutral-800{--tw-bg-opacity:1;background-color:rgb(38 38 38 / var(--tw-bg-opacity))}.bg-red-300{--tw-bg-opacity:1;background-color:rgb(252 165 165 / var(--tw-bg-opacity))}.bg-yellow-400{--tw-bg-opacity:1;background-color:rgb(250 204 21 / var(--tw-bg-opacity))}.fill-yellow-300{fill:#fde047}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgb(0 0 0 / 0.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-inner{--tw-shadow:inset 0 2px 4px 0 rgb(0 0 0 / 0.05);--tw-shadow-colored:inset 0 2px 4px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-yellow-200{--tw-shadow-color:#fef08a;--tw-shadow:var(--tw-shadow-colored)}.duration-500{transition-duration:500ms}.\[box-shadow\:0px_-75px_55px_-30px_\#262626\]{box-shadow:0px -75px 55px -30px #262626}.\[transform\:_rotateX\(80deg\)\]{transform:rotateX(80deg)}.group:hover .group-hover\:-skew-x-2{--tw-skew-x:-2deg;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\:\[box-shadow\:0px_-75px_95px_0px_\#FDE047\]{box-shadow:0px -75px 95px 0px #FDE047}