Tailwind 和 CSS 动画环偏移缩小

问题描述 投票:0回答:1
<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 个缩略图,左边的缩略图悬停在其上,右边的缩略图是初始状态。我希望它在缩略图悬停时有一个缩小的动画,而不是我当前的动画,因为它非常突然

tailwind-css
1个回答
0
投票

您可以考虑应用包含

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>

© www.soinside.com 2019 - 2024. All rights reserved.