css3的Transition平滑過渡功能表列實現

這次給大家帶來css3的Transition平滑過渡功能表列實現，實現Transition平滑過渡功能表列的注意事項有哪些，下面就是實戰案例，一起來看一下。

CSS3的製作動畫的三大屬性（Transform,Transition,Animation）下面介紹一下 Transition屬性。transition屬性是一個速記屬性有四個屬性：transition-property, transition-duration, transition-timing-function, and transition-delay。

文法

transition: property duration timing-function delay;

屬性：

值	描述
transition-property	指定CSS屬性的name，transition效果
transition-duration	transition效果需要指定多少秒或毫秒才能完成
transition-timing-function	指定transition效果的轉速曲線
transition-delay	定義transition效果開始的時候

下面給出一個案例

先看：

原理圖解：

當滑鼠移入菜單列表上，添加一個hover樣式。也就是讓p.wrap 的top值設定為負值。然後利用transition屬性使其平滑過渡。

完整demo

<!--html--><style> .menu{        margin: 100px auto;    }    .menu ul li{        float:left;        width: 50px;        height: 25px;        background-color: #2aabd2;        margin-right: 5px;        line-height: 25px;        position: relative;        overflow: hidden;    }    .menu ul li a{        display: block;        height:25px;        width: 50px;        text-align: center;        line-height: 25px;        color: white;    }    .menu ul li .awrap{        position: absolute;        top:0;        left: 0;    }    .menu ul li .awrap:hover{        transition: all .3s ease-in;        top:-25px;    }</style><p class="menu clearfix">    <ul>        <li>            <p class="awrap">                <a href=""><i class="fa fa-cog"></i></a>                <a href="">菜單</a>            </p>        </li>        <li>            <p class="awrap">                <a href=""><i class="fa fa-star-o"></i></a>                <a href="">菜單</a>            </p>        </li>        <li>            <p class="awrap">                <a href=""><i class="fa fa-user"></i></a>                <a href="">菜單</a>            </p>        </li>        <li>            <p class="awrap">                <a href=""><i class="fa fa-search"></i></a>                <a href="">菜單</a>            </p>        </li>        <li>            <p class="awrap">                <a href=""><i class="fa fa-adn"></i></a>                <a href="">菜單</a>            </p>        </li>    </ul></p>

注釋：其中表徵圖使用字型表徵圖Font Awesome，需要瞭解的可以搜一下Font Awesome

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

css3的pointer-events使用詳解

focus-within的使用詳解

CSS3做出無縫輪播廣告