Navbar-Symbole, Optionen für UI/UX mit HTML-CSS- und JS-Code-js-Tutorial-php.cn

Navbar-Symbole, Optionen für UI/UX mit HTML-CSS- und JS-Code

Barbara Streisand

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

Original

235 Leute haben es durchsucht

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

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mobiler Slider</title>
    <Stil>
        Körper {
            Rand: 0;
            Polsterung: 0;
            Schriftfamilie: Arial, serifenlos;
            Anzeige: Flex;
            rechtfertigen-Inhalt: Mitte;
            align-items: center;
            Höhe: 100 Vh;
            Hintergrund: linearer Farbverlauf (nach unten, #1a1a2e, #16213e);
            Farbe: weiß;
        }

        .slider-container {
            Anzeige: Flex;
            Flex-Wrap: wickeln;
            Lücke: 10px;
            Breite: 500px;
            justify-content: space-evenly;
            align-items: center;
        }

        .slider-item {
            Anzeige: Flex;
            Flexrichtung: Spalte;
            align-items: center;
            rechtfertigen-Inhalt: Mitte;
            Position: relativ;
            Breite: 80px;
            Höhe: 80px;
            Hintergrund: #1f4068;
            Randradius: 50 %;
            Übergang: Transformieren 0,3 Sekunden lang, Box-Shadow 0,3 Sekunden lang, Hintergrund 0,3 Sekunden lang;
            Box-Shadow: 0 4px 6px rgba(0, 0, 0, 0,2);
            Cursor: Zeiger;
        }

        .slider-item:hover {
            transformieren: Skala(1.1);
            Box-Shadow: 0 6px 10px rgba(0, 0, 0, 0,3);
        }

        .slider-item.active {
            Hintergrund: linearer Farbverlauf (nach rechts, #ff7e5f, #feb47b); /* Attraktives Gefälle für Aktive */
            transformieren: Skala(1.2); /* Etwas größere Größe */
            Box-Shadow: 0 8px 12px rgba(255, 126, 95, 0,5);
        }

        .slider-item i {
            Schriftgröße: 28px;
            Farbe: weiß;
        }

        .slider-item span {
            Rand oben: 8px;
            /* Schriftgröße: 8px; */
            Farbe: weiß;
            Textausrichtung: Mitte;
        }

        .Etikett {
            Schriftgröße: 12px;
            Rand links: 15px;
            Farbe: weiß;
            Rand oben: 10px;
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<Körper>
    <div>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonNavbar-Symbole, Optionen für UI/UX mit HTML-CSS- und JS-Code. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!