搜尋

首頁  >  問答  >  主體

关于CSS3 动画transition的一个问题

a{
    color: #0088cc;
    text-decoration: none;
    &:hover,
    &:active,
    &:focus{
        color: orange;
        text-decoration: none;
        -webkit-transition: color 250ms ease-in 0ms;
        -moz-transition: color 250ms ease-in 0ms;
        -ms-transition: color 250ms ease-in 0ms;
        -o-transition: color 250ms ease-in 0ms;
        transition:  color 250ms ease-in 0ms;
    }
}

在alloyteam blog看到的一个效果。就是鼠标移动到 a 连接上时,颜色是渐进变化的,移开鼠标时也会有一个颜色渐变的效果,请问是怎样做到的。

天蓬老师天蓬老师2868 天前536

全部回覆(2)我來回復

  • PHPz

    PHPz2017-04-17 11:07:58

    雷雷

    回覆
    0
  • 高洛峰

    高洛峰2017-04-17 11:07:58

    a:link, a:visited, a:active {
    text-decoration: none;
    -webkit-transition: ...;
    -moz-transition: ...;
    -ms-transition: ...;
    -o-transition: ...;
    transition: text-shadow 500ms ease-in 0ms, color 500ms ease-in 0ms;
    }
    

    transition: text-shadow 500ms ease-in 0ms, color 500ms ease-in 0ms;
    這一行中定義了指定兩個屬性的動畫:text-shadowcolor,你說的顏色漸進就是color 500ms ease-in 0m
    可以理解為:
    執行變化的屬性:color
    動畫持續時間:500ms
    時間函數(定義了執行動畫的方式):ease-in(由慢到快);
    延遲時間:0m

    回覆
    0
  • 取消回覆