欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解css3 Transition屬性（平滑過渡菜單欄案例）

  發(fā)布時間：2017-09-05 10:06:54   作者：yy211zhu   我要評論
這篇文章主要介紹了詳解css3 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效果的轉(zhuǎn)速曲線
transition-delay 定義transition效果開始的時候

下面給出一個案例

先看效果圖：

這里寫圖片描述

原理圖解：

這里寫圖片描述

當鼠標移入菜單列表上，添加一個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:-25px;
    }
</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，需要了解的可以搜一下Font Awesome

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關文章

  • 解決CSS3 transition-delay 屬性默認值0不帶單位失效的問題

    這篇文章主要介紹了解決CSS3 transition-delay 屬性默認值0不帶單位失效的問題,本文給大介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2020-10-29

  • CSS3使用transition屬性實現(xiàn)過渡效果

    CSS3中新增的transform屬性，可以實現(xiàn)元素在變換過程中的過渡效果，實現(xiàn)了基本的動畫。下面通過本文給大家介紹CSS3使用transition屬性實現(xiàn)過渡效果，需要的朋友參考下本文
    2018-04-18

  • CSS3與動畫有關的屬性transition、animation、transform對比（史上最全

    這篇文章主要介紹了CSS3與動畫有關的屬性transition、animation、transform對比，通過瀏覽器兼容性，用法和對比更深刻的展示了彼此之間的異同，具體操作步驟大家可查看下文
    2017-08-18

  • CSS3中的元素過渡屬性transition示例詳解

    大家都知道過渡動畫是動畫的基礎，在學習動畫屬性之前，我們需要先了解過渡屬性transition，下面這篇文章通過示例代碼給大家詳細介紹了CSS3中的元素過渡屬性transition，有
    2016-11-30

  • CSS3中動畫屬性transform、transition和animation屬性的區(qū)別

    最近在項目中用到了CSS3中的動畫屬性。無奈對于css3幾個新加的屬性不太熟悉，常常容易搞混。所以從網(wǎng)站研究了點資料，總結(jié)一下，方便有需要的朋友們可以參考學習。
    2016-09-25

  • 詳解css3中transition屬性

    css3中通過transition屬性可以實現(xiàn)一些簡單的動畫過渡效果，今天通過本文給大家介紹下css3中transition屬性的示例代碼，感興趣的朋友跟隨小編一起看看吧
    2022-02-18

最新評論