Pilihan ikon bar navigasi ui/ux menggunakan html css dan kod js-tutorial js-php.cn

Pilihan ikon bar navigasi ui/ux menggunakan html css dan kod js

Barbara Streisand

Lepaskan： 2024-12-25 14:18:10

asal

321 orang telah melayarinya

Navbar icons options ui/ux using html css and js code

<!DOCTYPE html>
<html lang="en">
<kepala>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Peluncur Mudah Alih</title>
    <gaya>
        badan {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            paparan: flex;
            justify-content: pusat;
            align-item: tengah;
            ketinggian: 100vh;
            latar belakang: kecerunan linear(ke bawah, #1a1a2e, #16213e);
            warna: putih;
        }

        .gelangsar-bekas {
            paparan: flex;
            flex-wrap: bungkus;
            jurang: 10px;
            lebar: 500px;
            justify-content: ruang-sama rata;
            align-item: tengah;
        }

        .slider-item {
            paparan: flex;
            flex-direction: lajur;
            align-item: tengah;
            justify-content: pusat;
            kedudukan: relatif;
            lebar: 80px;
            ketinggian: 80px;
            latar belakang: #1f4068;
            jejari sempadan: 50%;
            peralihan: mengubah 0.3s mudah, kotak-bayangan mudah 0.3s, latar belakang 0.3s mudah;
            bayang kotak: 0 4px 6px rgba(0, 0, 0, 0.2);
            kursor: penunjuk;
        }

        .slider-item:hover {
            transform: skala(1.1);
            bayang kotak: 0 6px 10px rgba(0, 0, 0, 0.3);
        }

        .slider-item.active {
            latar belakang: kecerunan linear(ke kanan, #ff7e5f, #feb47b); /* Kecerunan yang menarik untuk aktif */
            transform: skala (1.2); /* Saiz lebih besar sedikit */
            bayang-kotak: 0 8px 12px rgba(255, 126, 95, 0.5);
        }

        .slider-item i {
            saiz fon: 28px;
            warna: putih;
        }

        .slider-item span {
            jidar atas: 8px;
            /* saiz fon: 8px; */
            warna: putih;
            text-align: tengah;
        }

        .label {
            saiz fon: 12px;
            jidar-kiri: 15px;
            warna: putih;
            jidar atas: 10px;
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<badan>
    <div>

Salin selepas log masuk

Atas ialah kandungan terperinci Pilihan ikon bar navigasi ui/ux menggunakan html css dan kod js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!