在實(shí)際工作中，簡(jiǎn)單利用css3的屬性可以讓頁(yè)面更生動(dòng)，如下面的例子:

“了解詳情”的hover效果比單純的顏色變換效果更生動(dòng)。而實(shí)現(xiàn)的方式就是簡(jiǎn)單的利用了css3transition屬性。

頁(yè)面代碼結(jié)構(gòu)如下：

<div class="box">
    <a href="#">
        <span>了解詳情</span>
        <em></em>
    </a>
</div>

原理

1. 定位一個(gè) 初始width為0的em元素，hover的時(shí)候再將 width設(shè)置為容器的width.
2. 再利用transiton對(duì)width變化的過程設(shè)置過度效果

css如下：

.box a {        
    position: relative; 
    z-index: 0;
    display: inline-block;
    width: 158px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 20px;
}
.box a em {
    position: absolute;
    z-index: -1;
    top: 0px;
    left: 0px;
    display: inline-block;
    width: 0;  
    height: 100%;
    background-color: #fff;
    border-radius: 20px;
    transition: width .3s ease;
}

.box a:hover span {
    color: #00aeff;
}

.box a:hover em {
    width: 100%;  
}

參考

1. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
2. https://developer.mozilla.org/en-US/docs/Web/CSS/transition

（完）