下拉菜單滑動效果(animation實踐)

滑動效果圖
思路:通過給父元素設定固定的寬度和高度以及設置overflow:hidden屬性將超出的ul li列表隱藏掉。視覺上看到的上下滑動的其實是父元素的高度,而不是ul li列表,列表並沒有動過。但視覺上感覺到的就是ul li列表在上下滑動。
完整代碼如下:

 <title>下拉菜單滑動效果</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .ulList{
            width:100px;
            height:27px;
            overflow:hidden;//將超出固定高度的部分給隱藏起來
            margin:auto;
            transition:all 0.5s linear;
        }
        .ulList:hover{
            height:137px;//將父元素高度拉長以讓列表包含在內給顯示出來
        }
        .ulList>li{
            list-style:none;
            background-color:palegreen;
            text-align:center;
            border:1px solid black;
            height:25px;
            line-height:25px;
        }
        a{
            text-decoration:none;
            color:black;
        }
    </style>
</head>
<body>
<ul class="ulList">
    <li class="liA">LOVE-Family</li>
    <li><a href="">father</a></li>
    <li><a href="">mother</a></li>
    <li><a href="">brother</a></li>
    <li><a href="">and me</a></li>
</ul>
</body>

遇到的問題:中途有給子元素設置懸停讓父元素某個樣式改變時是沒有效果的。可能原因是當設置同一個樣式時父元素的優先級高於子元素,所以在子元素上面改變父元素的樣式是不可以的。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章