如何在懸停在文本/圖像上時觸發動畫文本？

Question

我的品牌名稱是：代碼

我nav這個樣子的

代碼首頁|服務|產品|聯繫

我想改變Code - >{ Code }當用戶在我的我的名牌徘徊。

我想風格{ }有red顏色。

我希望{ }不遲於2秒。

有人可以告訴我我該怎麼做CSS？

由於動畫涉及我需要JS嗎？動畫的

Edit

方向

{< - 代碼 - >}

Answer 1

我會做這樣的事情。您可以使用CSS的transitions創造一些不錯的效果

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

FIDDLE

Answer 2

這裏是一個小提琴

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

您在懸停動作使用Pseudo elements

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

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