CSS3模擬動畫下拉式選單效果-css教學-PHP中文網

首頁

web前端

css教學

CSS3模擬動畫下拉式選單效果

巴扎黑

May 14, 2017 pm 01:45 PM

css3 選單

使用css3製作的下拉式選單外觀非常漂亮，在各大網站都適用，今天小編透過本文給大家分享基於css3製作的動畫下拉選單效果，需要的朋友參考下吧

下拉式選單模擬效果圖：

CSS3：

<style>
            #box{width:200px; height:50px; overflow:hidden; cursor: pointer; transition: all 0.35s;}
            #box:hover{height:250px;}
            #box ul{list-style:none; margin:0; padding:0;}
            #box ul li{width:198px; height:48px; line-height: 50px; text-align: center; border:1px red solid; background:#000000; color:white;}
        </style>

登入後複製

HTML：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <p id="box">
            <ul>
                <li>This&#39;s 1</li>
                <li>This&#39;s 2</li>
                <li>This&#39;s 3</li>
                <li>This&#39;s 4</li>
                <li>This&#39;s 5</li>
            </ul>
        </p>
    </body>
</html>

登入後複製

以上是CSS3模擬動畫下拉式選單效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7541

CakePHP 教程

1381

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

Windows 11: 匯入和匯出開始佈局的簡單方法 Aug 22, 2023 am 10:13 AM

在Windows11中，「開始」功能表經過重新設計，並具有一組簡化的應用，這些應用程式排列在頁面網格中，這與它的前身不同，後者在「開始」功能表上有資料夾、應用程式和組。您可以自訂「開始」功能表佈局，並將其匯入並匯出至其他Windows設備，以根據您的喜好進行個人化設定。在本指南中，我們將討論在Windows11上匯入開始佈局以自訂預設佈局的逐步說明。什麼是Windows11中的Import-StartLayout？導入開始佈局是Windows10和更早版本中使用的cmdlet，用於將「開始」功能表的自定

純CSS3怎麼實現波浪效果？（程式碼範例） Jun 28, 2022 pm 01:39 PM

純CSS3怎麼實現波浪效果？這篇文章就來跟大家介紹一下使用 SVG 和 CSS 動畫來製作波浪效果的方法，希望對大家有幫助！

如何在Windows 11的右鍵選單中預設'顯示更多選項” Jul 10, 2023 pm 12:33 PM

我們用戶從來不想要的最煩人的更改之一是在右鍵單擊上下文功能表中包含“顯示更多選項”。但是，您可以刪除它並取回Windows11中的經典上下文功能表。不再需要多次點擊並在上下文選單中尋找這些ZIP捷徑。請依照本指南返回Windows11上成熟的右鍵點選上下文功能表。修復1–手動調整CLSID這是我們清單中唯一的手動方法。您將在登錄編輯器中調整特定鍵或值以解決此問題。注意–像這樣的註冊表編輯非常安全，並且可以正常工作。因此，在系統上嘗試此操作之前，您應該建立註冊表備份。步驟1–嘗試

巧用CSS實現各種奇形怪狀按鈕（附代碼） Jul 19, 2022 am 11:28 AM

這篇文章帶大家看看怎麼使用 CSS 輕鬆實現高頻出現的各類奇形怪狀按鈕，希望對大家有幫助！

css怎麼隱藏元素但不佔空間 Jun 01, 2022 pm 07:15 PM

兩種方法：1、利用display屬性，只要為元素加上「display:none;」樣式即可。 2.利用position和top屬性設定元素絕對定位來隱藏元素，只需為元素加上「position:absolute;top:-9999px;」樣式。

如何從 Windows 11 中的右鍵單擊上下文功能表中刪除「在 Windows 終端機中開啟」選項 Apr 13, 2023 pm 06:28 PM

預設情況下，Windows 11 右鍵單擊上下文功能表有一個名為Open in Windows Terminal的選項。這是一個非常有用的功能，可讓使用者在特定位置開啟 Windows 終端。例如，如果您右鍵單擊資料夾並選擇「在 Windows 終端機中開啟」選項，則 Windows 終端將啟動並將該特定位置設為其目前工作目錄。儘管這是一個了不起的功能，但並不是每個人都發現此功能的用途。一些用戶可能只是不希望在他們的右鍵單擊上下文功能表中使用此選項，並且希望將其刪除以整理他們的右鍵單擊上下文菜