2015年12月19日 星期六

滑開感覺動作css

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<style>
.header ul li {
    display: inline;
}
.header ul a {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    width: 30px;
    -webkit-transition: color .25s ease-in-out, width .25s ease-in-out;
    -moz-transition: color .25s ease-in-out, width .25s ease-in-out;
    -ms-transition: color .25s ease-in-out, width .25s ease-in-out;
    -o-transition: color .25s ease-in-out, width .25s ease-in-out;
    transition: color .25s ease-in-out, width .25s ease-in-out;
}
.header ul a.active, .header ul a:hover {
    width: 150px;
}
.header .fa{ width:30px;}
</style>



html 部分

<div class="header">
<ul>
<li><a href="#"><i class="fa fa-anchor"></i><span>投資組合</span></a></li>
<li><a href="#"><i class="fa fa-bell-o"></i><span>下午7時26分</span></a></li>
<li><a href="#"><i class="fa fa-taxi"></i><span>日出</span></a></li>
<li><a href="#"><i class="fa fa-cogs"></i><span>背景</span></a></li>
</ul>
</div>

示意圖