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

Question

我的品牌名称是：代码

我的nav看起来像这样

  

代码主页|服务|产品|接触

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

我想将{ }设置为red颜色。

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

有人可以告诉我如何在CSS中执行此操作？

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

Edit

动画方向

{＆lt; - Code - ＆gt;}

Answer 1

这是一个小提琴

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

您在悬停操作

上使用Pseudo elements

a:hover::before
{
    content:"{";
}

a:hover::after
{
    content:"}";
}

Answer 2

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

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

FIDDLE