详解css3 Transition特性（光滑过渡工具栏实例）

日期：2021-03-02 类型：科技新闻 

关键词：自助建站，专业建站，建站网站，建站平台，网站在线制作app

CSS3的制做动漫的3大特性（Transform,Transition,Animation）下面详细介绍1下 Transition特性。transition特性是1个速记特性有4个特性：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实际效果刚开始的情况下

下面得出1个实例

先看实际效果图：

基本原理图解：

当电脑鼠标移入菜单目录上，加上1个hover款式。也便是让div.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:⑵5px;
    }
</style>
<div class="menu clearfix">
    <ul>
        <li>
            <div class="awrap">
                <a href=""><i class="fa fa-cog"></i></a>
                <a href="">菜单</a>
            </div>
        </li>
        <li>
            <div class="awrap">
                <a href=""><i class="fa fa-star-o"></i></a>
                <a href="">菜单</a>
            </div>
        </li>
        <li>
            <div class="awrap">
                <a href=""><i class="fa fa-user"></i></a>
                <a href="">菜单</a>
            </div>
        </li>
        <li>
            <div class="awrap">
                <a href=""><i class="fa fa-search"></i></a>
                <a href="">菜单</a>
            </div>
        </li>
        <li>
            <div class="awrap">
                <a href=""><i class="fa fa-adn"></i></a>
                <a href="">菜单</a>
            </div>
        </li>
    </ul>
</div>

注解：在其中标志应用字体样式标志Font Awesome，必须掌握的能够搜1下Font Awesome

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。

上一篇：css合理布局之BFC方式（block formatting context） 返回下一篇：没有了