如何将鼠标悬停在文本/图像上时触发动画文本

How to trigger an animate text when hover on a text/image?

本文关键字：文本 动画 图像 鼠标 悬停      更新时间：2023-09-26

我的品牌名称是：代码

我的nav看起来像这样

代码主页 | 服务 |产品展示 | 联系

我想更改Code -> { Code }当用户将鼠标悬停在我的品牌名称上时。

我想将{ }样式设置为具有red颜色。

我希望{ }在 2 秒内向右滑动。

有人可以告诉我如何在CSS做到这一点吗？

由于涉及动画，我需要JS吗？

Edit

动画方向

{<-- Code -->}

我会做这样的事情。您可以使用CSS的transitions来创建一些不错的效果

<div class="logo">
  <span class="left">{</span>
  Code
  <span class="right">}</span>
</div>

小提琴

这是一个小提琴

http://jsfiddle.net/rLdtse86/13/

在悬停操作中使用伪元素

a:hover::before
{
    content:"{";
}
a:hover::after
{
    content:"}";
}
相关文章：