Tailwind CSS 创建动画箭头

Question

我正在尝试创建一个移动的箭头（向上穿过直角，然后通过左下角重新出现）。到目前为止，我已经完成了消失的部分，但无法解决如何让它从左下角返回。

我的代码如下：

<div class="text-3xl w-fit" style="clip-path: inset(0 0 0 0 );" >
   <div class="transition ease-in-out hover:-translate-y-5 hover:translate-x-5 " >↗</div>
</div>

（还有更好的方法会很可爱）

Answer 1

试试这个：

DEMO

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

<div class="text-3xl p-2 group border w-fit grid" style="clip-path: inset(0 0 0 0 );">
  <div class="[grid-area:1/1] flex items-center justify-center h-10 w-10 transition ease-in-out group-hover:delay-300 translate-y-10 -translate-x-10 group-hover:translate-y-0 group-hover:translate-x-0">↗</div>
  <div class="[grid-area:1/1] flex items-center justify-center h-10 w-10 transition ease-in-out delay-300 group-hover:delay-[0s] duration-300 group-hover:-translate-y-10 group-hover:translate-x-10">↗</div>
</div>

Tailwind CSS 创建动画箭头

Tailwind CSS create animated arrow

css

css-animations

tailwind-css