利用transition属性实现一个简单小巧的hover效果

在实际工作中，简单利用css3的属性可以让页面更生动，如下面的例子:

“了解详情”的hover效果比单纯的颜色变换效果更生动。而实现的方式就是简单的利用了css3transition属性。

页面代码结构如下：

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

原理

1. 定位一个 初始width为0的em元素，hover的时候再将 width设置为容器的width.
2. 再利用transiton对width变化的过程设置过度效果

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

（完）