主页 / coding / 问题 / 78836488
Accepted
GʀᴜᴍᴘʏCᴀᴛ
Asked: 2024-08-06 05:23:59 +0800 CST

在 Tailwind 中如何从中心悬停时展开？

  • 772

在 CSS 中我可以使用以下方法在悬停时展开：

a {
  --border-color: green;
  --border-width: 5px;
  --bottom-distance: 0px;
  
text-decoration:none;
background-position: 50% calc(100% - var(--bottom-distance));
  color: #666;
  display: inline-block;
  background-image: linear-gradient(var(--border-color), var(--border-color));
  background-size: 0% var(--border-width);
  background-repeat: no-repeat;
  transition: background-size 0.3s;
  margin: 5px 0;
}

a:hover {
  background-size: 100% var(--border-width);
}
<a href="#">Expand from center</h1><br/>

我一直在阅读以下文档：

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

<a href="#" class="group text-sm">
Expand from center
<span class="block mt-4 max-w-0 group-hover:max-w-full transition-all duration-500 h-0.5 bg-green-600"></span>
</a>

如何在 Tailwind CSS 中将鼠标悬停在中心时展开？

hover

1 个回答

  1. Best Answer

    不要使用 过渡 ，而max-width要考虑 过渡transform: scaleX()。 由于浏览器每帧的工作量比 少，因此这种方法性能更高。max-width此外， 还transform: scaleX()具有与之配合使用的额外优势transform-origin，从而也解决了您的问题：

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

<a href="#" class="group text-sm">
  Expand from center
  <span class="block mt-4 scale-x-0 group-hover:scale-x-100 transition-transform duration-500 h-0.5 bg-green-600 origin-center"></span>
</a>

    • 0

相关问题