Rumah hujung hadapan web tutorial css CSS3模拟动画下拉菜单效果

CSS3模拟动画下拉菜单效果

May 14, 2017 pm 01:45 PM
css3 menu

使用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>
Salin selepas log masuk

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>
Salin selepas log masuk

Atas ialah kandungan terperinci CSS3模拟动画下拉菜单效果. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Arahan sembang dan cara menggunakannya
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Windows 11: Cara mudah untuk mengimport dan mengeksport reka letak permulaan Windows 11: Cara mudah untuk mengimport dan mengeksport reka letak permulaan Aug 22, 2023 am 10:13 AM

Dalam Windows 11, menu Mula telah direka bentuk semula dan menampilkan set apl yang dipermudahkan yang disusun dalam grid halaman, tidak seperti pendahulunya, yang mempunyai folder, apl dan apl pada menu Mula. Anda boleh menyesuaikan susun atur menu Mula dan mengimport serta mengeksportnya ke peranti Windows lain untuk memperibadikannya mengikut keinginan anda. Dalam panduan ini, kami akan membincangkan arahan langkah demi langkah untuk mengimport Reka Letak Mula untuk menyesuaikan reka letak lalai pada Windows 11. Apakah Import-StartLayout dalam Windows 11? Import Start Layout ialah cmdlet yang digunakan dalam Windows 10 dan versi terdahulu untuk mengimport penyesuaian untuk menu Mula ke dalam

Bagaimana untuk mencapai kesan gelombang dengan CSS3 tulen? (contoh kod) Bagaimana untuk mencapai kesan gelombang dengan CSS3 tulen? (contoh kod) Jun 28, 2022 pm 01:39 PM

Bagaimana untuk mencapai kesan gelombang dengan CSS3 tulen? Artikel ini akan memperkenalkan kepada anda cara menggunakan animasi SVG dan CSS untuk mencipta kesan gelombang Saya harap ia akan membantu anda!

Cara Lalai 'Tunjukkan Lebih Banyak Pilihan' dalam Menu Klik Kanan Windows 11 Cara Lalai 'Tunjukkan Lebih Banyak Pilihan' dalam Menu Klik Kanan Windows 11 Jul 10, 2023 pm 12:33 PM

Salah satu perubahan yang paling menjengkelkan yang kami pengguna tidak pernah mahu ialah kemasukan "Tunjukkan lebih banyak pilihan" dalam menu konteks klik kanan. Walau bagaimanapun, anda boleh mengalih keluarnya dan mendapatkan kembali menu konteks klasik dalam Windows 11. Tiada lagi berbilang klik dan mencari pintasan ZIP ini dalam menu konteks. Ikuti panduan ini untuk kembali ke menu konteks klik kanan penuh pada Windows 11. Betulkan 1 – Laraskan CLSID secara manual Ini adalah satu-satunya kaedah manual dalam senarai kami. Anda akan melaraskan kunci atau nilai tertentu dalam Editor Pendaftaran untuk menyelesaikan isu ini. Nota – Suntingan pendaftaran seperti ini sangat selamat dan akan berfungsi tanpa sebarang masalah. Oleh itu, anda harus membuat sandaran pendaftaran sebelum mencuba ini pada sistem anda. Langkah 1 – Cubalah

Gunakan CSS dengan mahir untuk merealisasikan pelbagai butang berbentuk pelik (dengan kod) Gunakan CSS dengan mahir untuk merealisasikan pelbagai butang berbentuk pelik (dengan kod) Jul 19, 2022 am 11:28 AM

Artikel ini akan menunjukkan kepada anda cara menggunakan CSS untuk melaksanakan pelbagai butang berbentuk pelik yang kerap muncul. Saya harap ia akan membantu anda!

Bagaimana untuk menyembunyikan elemen dalam css tanpa mengambil ruang Bagaimana untuk menyembunyikan elemen dalam css tanpa mengambil ruang Jun 01, 2022 pm 07:15 PM

Dua kaedah: 1. Menggunakan atribut paparan, cuma tambah gaya "display:none;" pada elemen. 2. Gunakan kedudukan dan atribut teratas untuk menetapkan kedudukan mutlak elemen untuk menyembunyikan elemen. Cuma tambahkan gaya "position:absolute;top:-9999px;".

Bagaimana untuk mengalih keluar pilihan 'Buka dalam Windows Terminal' daripada menu konteks klik kanan dalam Windows 11 Bagaimana untuk mengalih keluar pilihan 'Buka dalam Windows Terminal' daripada menu konteks klik kanan dalam Windows 11 Apr 13, 2023 pm 06:28 PM

Secara lalai, menu konteks klik kanan Windows 11 mempunyai pilihan yang dipanggil Buka dalam Terminal Windows. Ini adalah ciri yang sangat berguna yang membolehkan pengguna membuka Terminal Windows di lokasi tertentu. Contohnya, jika anda klik kanan pada folder dan pilih pilihan "Buka dalam Terminal Windows", Terminal Windows akan melancarkan dan menetapkan lokasi khusus itu sebagai direktori kerja semasanya. Walaupun ini adalah ciri yang hebat, tidak semua orang mendapati kegunaan untuk ciri ini. Sesetengah pengguna mungkin tidak mahu pilihan ini dalam menu konteks klik kanan mereka dan mahu mengalih keluarnya untuk mengemas menu konteks klik kanan mereka.

Bagaimana untuk melaksanakan sempadan renda dalam css3 Bagaimana untuk melaksanakan sempadan renda dalam css3 Sep 16, 2022 pm 07:11 PM

Dalam CSS, anda boleh menggunakan atribut imej sempadan untuk mencapai sempadan renda. Atribut imej sempadan boleh menggunakan imej untuk membuat sempadan, iaitu, menambah imej latar belakang ke sempadan Anda hanya perlu menentukan imej latar belakang sebagai gaya renda; lebar sempadan imej ke dalam. Sama ada permulaan diulang;".

Ternyata karusel teks dan karusel imej juga boleh direalisasikan menggunakan CSS tulen! Ternyata karusel teks dan karusel imej juga boleh direalisasikan menggunakan CSS tulen! Jun 10, 2022 pm 01:00 PM

Bagaimana untuk mencipta karusel teks dan karusel imej? Perkara pertama yang semua orang fikirkan ialah sama ada untuk menggunakan js Malah, karusel teks dan karusel imej juga boleh direalisasikan menggunakan CSS tulen. Saya harap ia akan membantu semua orang.

See all articles