利用CSS Transition來實現動畫效果

來源:互聯網
上載者:User

今天在網上亂逛的時候發現了網站http://studioantwork.com/,其中功能表列當滑鼠懸浮時透明度會降低,一般來說,我們會使用jquery來實現這一過渡效果,不過在這裡設計者使用了一種不同的方法,對於孤陋寡聞的我來說實在是太新奇了。

以下是作者的源碼

/* fade */#title {       padding: 0px 0px 0px 0px;       float:left;       opacity: 1;       -webkit-transition: opacity 0.3s;       -moz-transition: opacity 0.3s;       -webkit-animation-timing-function: ease-out;       -moz-animation-timing-function: ease-out;}#title:hover {opacity: 0.5;}
有新鮮東西難免學習一下,在此中就會碰到很多問題需要記錄

我有一個菜單

<nav>     <ul id="main-nav">         <li><a href="http://www.w3school.com.cn">HOME</a></li>         <li><a href="#">a</a></li>         <li><a href="#">b</a></li>         <li><a href="#">c</a></li>     </ul></nav>
怎麼來實現這個功能呢。

nav ul li a{opacity:1;color:#000000;text-transform:uppercase;text-decoration:none;-webkit-transition: opacity 0.35s ease-out;      -moz-transition: opacity 0.35s ease-out;      -o-transition: opacity 0.35s ease-out;  }nav ul li a :hover{opacity:0.5;}

這麼看似乎是可以了,但是一運行發現是不行的。

作為一個苦逼的GIS工程師,對於CSS神馬的實在是有夠不懂的,於是果斷上w3school尋找協助。

根據w3school中對CSS偽類的說法,在 CSS 定義中,a:hover 必須被置於 a:link 和 a:visited 之後,才是有效。

詳見http://www.w3school.com.cn/css/css_pseudo_classes.asp

那麼為什麼studioantwork中的寫法就是OK的呢。各種原因我並不瞭解,希望有瞭解的朋友幫忙解惑。但這不妨礙我模仿,於是有了下面的代碼

#main-nav a{   opacity: 1;       -webkit-transition: opacity 0.3s;       -moz-transition: opacity 0.3s;       -webkit-animation-timing-function: ease-out;       -moz-animation-timing-function: ease-out;}#main-nav a:hover{opacity: 0.5; }

經實驗,這樣就OK了。

另外呢,通過google,找到了http://www.189works.com/article-78327-1.html,在此有通過a:link,a:visited,a:hover實現此效果的介紹。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.