Tailwind 和 CSS 动画环偏移缩小

Question

<div class="flex flex-col items-center justify-center rounded-xl bg-[#101638] px-5 pb-8 pt-7">
   <div class="relative mb-5 cursor-pointer">
      <img class="mx-auto max-w-[90px] rounded-full p-1 ring ring-offset-8 ring-offset-[#101638] hover:ring-offset-0 ring-[#133e8d] md:max-w-[114px]" src="/images/Avatar1.png" alt="Bordered avatar">
      <div class="absolute bottom-1 right-2 rounded-full bg-blue-600 px-2 py-1 ring-4 ring-[#0d1129]">
         <svg class="svg-inline--fa fa-message-dots text-white" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="message-dots" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
            <path class="" fill="currentColor" d="M0 64C0 28.7 28.7 0 64 0H448c35.3 0 64 28.7 64 64V352c0 35.3-28.7 64-64 64H309.3L185.6 508.8c-4.8 3.6-11.3 4.2-16.8 1.5s-8.8-8.2-8.8-14.3V416H64c-35.3 0-64-28.7-64-64V64zM128 240a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm128 0a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm160-32a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"></path>
         </svg>
      </div>
   </div>
   <div>
      <h1 class="font-bold">First Name</h1>
   </div>
   <div>
      <h1>Name</h1>
   </div>
   <div>
      <h1 class="text-[#636da8]">Project Mngr</h1>
   </div>
</div>

如何为任何 css/tailwind 解决方案的偏移环的过渡设置动画？ 例如，这 2 个缩略图，左边的缩略图悬停在其上，右边的缩略图是初始状态。我希望它在缩略图悬停时有一个缩小的动画，而不是我当前的动画，因为它非常突然

Answer 1

您可以考虑应用包含

transition-property

的

box-shadow

CSS 值，例如

transition

或

transition-all

Tailwind 类，以及非 0

transition-duration

，上述类名也设置了：

<script src="https://cdn.tailwindcss.com/3.4.1"></script>

<div class="flex flex-col items-center justify-center rounded-xl bg-[#101638] px-5 pb-8 pt-7">
   <div class="relative mb-5 cursor-pointer">
      <img class="mx-auto max-w-[90px] rounded-full p-1 ring ring-offset-8 ring-offset-[#101638] hover:ring-offset-0 ring-[#133e8d] md:max-w-[114px] transition" src="https://picsum.photos/90/90" alt="Bordered avatar">
      <div class="absolute bottom-1 right-2 rounded-full bg-blue-600 px-2 py-1 ring-4 ring-[#0d1129]">
         <svg class="svg-inline--fa fa-message-dots text-white" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="message-dots" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
            <path class="" fill="currentColor" d="M0 64C0 28.7 28.7 0 64 0H448c35.3 0 64 28.7 64 64V352c0 35.3-28.7 64-64 64H309.3L185.6 508.8c-4.8 3.6-11.3 4.2-16.8 1.5s-8.8-8.2-8.8-14.3V416H64c-35.3 0-64-28.7-64-64V64zM128 240a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm128 0a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm160-32a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"></path>
         </svg>
      </div>
   </div>
   <div>
      <h1 class="font-bold">First Name</h1>
   </div>
   <div>
      <h1>Name</h1>
   </div>
   <div>
      <h1 class="text-[#636da8]">Project Mngr</h1>
   </div>
</div>

否则，您可以考虑通过

transition-property: box-shadow

Tailwind 类应用

transition-duration: 150ms;

和

transition-[box-shadow]

（以及其他属性）以仅转换

box-shadow

：

<script src="https://cdn.tailwindcss.com/3.4.1"></script>

<div class="flex flex-col items-center justify-center rounded-xl bg-[#101638] px-5 pb-8 pt-7">
   <div class="relative mb-5 cursor-pointer">
      <img class="mx-auto max-w-[90px] rounded-full p-1 ring ring-offset-8 ring-offset-[#101638] hover:ring-offset-0 ring-[#133e8d] md:max-w-[114px] transition-[box-shadow]" src="https://picsum.photos/90/90" alt="Bordered avatar">
      <div class="absolute bottom-1 right-2 rounded-full bg-blue-600 px-2 py-1 ring-4 ring-[#0d1129]">
         <svg class="svg-inline--fa fa-message-dots text-white" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="message-dots" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
            <path class="" fill="currentColor" d="M0 64C0 28.7 28.7 0 64 0H448c35.3 0 64 28.7 64 64V352c0 35.3-28.7 64-64 64H309.3L185.6 508.8c-4.8 3.6-11.3 4.2-16.8 1.5s-8.8-8.2-8.8-14.3V416H64c-35.3 0-64-28.7-64-64V64zM128 240a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm128 0a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm160-32a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"></path>
         </svg>
      </div>
   </div>
   <div>
      <h1 class="font-bold">First Name</h1>
   </div>
   <div>
      <h1>Name</h1>
   </div>
   <div>
      <h1 class="text-[#636da8]">Project Mngr</h1>
   </div>
</div>