详解css3 Transition特性(光滑过渡工具栏实例)

日期:2020-12-12 类型:科技新闻 

关键词:建站平台有哪些,如何建设网站,免费自助建站,如何建立一个网站,网站建站的

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

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