CSS3展現橫向滾動選單按鈕效果代碼-css教學-PHP中文網

首頁

web前端

css教學

CSS3展現橫向滾動選單按鈕效果代碼

零下一度

Apr 17, 2017 pm 02:45 PM

css3按鈕橫向捲動

今天跟大家分享基於css3實現精美的橫向滾動菜單按鈕，非常不錯，具有參考借鑒價值，需要的的朋友參考下吧

廢話不多說，直接上圖：

然後是程式碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>精美横向滚动菜单按钮 - Glunefish</title>
    </head>
<!-- 这里接下面的行间样式 -->
    <body>
        <ul>
            <li><a href="" class="a1"><span>Home</span></a></li>
            <li><a href="" class="a2"><span>Chat</span></a></li>
            <li><a href="" class="a3"><span>About</span></a></li>
        </ul>
    </body>
</html>

CSS:

 <style>
        ul{list-style:none;}
        ul li a{
            display:block;
            width:40px;
            height:40px; 
            background:rgb(208,165,37); 
            margin-top:10px; 
            text-decoration:none; 
            line-height:40px; 
            position:relative;
            }
        ul li a span{
            width:0; 
            height:40px;
            display:block;
            visibility:hidden;
            overflow:hidden;
            font-weight:bold;
            position:absolute;
            left:40px;
            transition:all 0.3s;
            }
        ul li .a1 span{background:rgb(30,139,180);}
        ul li .a2 span{background:rgb(125,163,23);}
        ul li .a3 span{background:rgb(175,30,131);}
        ul li a:hover span{visibility:visible; width:auto; padding:0 20px;}
    </style>

為了方便閱讀特別優化了一下程式碼，主要涉及：

CSS3動畫(transtion)

元素的隱藏(overflow / visibility)

以上是CSS3展現橫向滾動選單按鈕效果代碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

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

錨定位只是不關心來源訂單Apr 29, 2025 am 09:37 AM

錨定定位避開HTML源順序的事實是如此之高，因為它在內容和演示文稿之間的另一個關注點是另一個分離的事實。

保證金是什麼：40px 100px 120px 80px表示？Apr 28, 2025 pm 05:31 PM

文章討論了CSS保證金屬性，特別是“保證金：40px 100px 120px 80px”，其應用程序以及對網頁佈局的影響。

什麼是不同的CSS邊框特性？Apr 28, 2025 pm 05:30 PM

本文討論了CSS邊境屬性，重點是自定義，最佳實踐和響應能力。主要論點：邊境 - 拉迪烏斯（Border-Radius）對響應式設計最有效。

什麼是CSS背景，列出屬性？Apr 28, 2025 pm 05:29 PM

本文討論了CSS背景屬性，它們在增強網站設計方面的用途以及避免的常見錯誤。重點是使用背景大小的響應式設計。

什麼是CSS HSL顏色？Apr 28, 2025 pm 05:28 PM

文章討論了CSS HSL顏色，其在網絡設計中的使用以及比RGB的優勢。主要重點是通過直觀的顏色操縱來增強設計和可訪問性。

我們如何在CSS中添加評論？Apr 28, 2025 pm 05:27 PM

本文討論了CSS中評論的使用，詳細介紹了單線和多行評論語法。它認為註釋可以增強代碼的可讀性，可維護性和協作，但如果無法正確管理，可能會影響網站性能。

什麼是CSS選擇器？Apr 28, 2025 pm 05:26 PM

本文討論了CSS選擇器，其類型和用於造型HTML元素的用法。它比較ID和類選擇器，並與復雜的選擇器解決性能問題。

哪種類型的CSS持有最高優先級？Apr 28, 2025 pm 05:25 PM

本文討論了CSS優先級，重點是具有最高特異性的內聯風格。它解釋了特異性級別，覆蓋方法和用於管理CSS衝突的工具。

See all articles

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

SublimeText3 Linux新版

SublimeText3 Linux最新版

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合，這些清單在安全評估過程中經常使用，而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表，幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上，他就可以存取所需的每種類型的清單。