Options des icônes de la barre de navigation ui/ux en utilisant le code html css et js-js tutoriel-php.cn

Options des icônes de la barre de navigation ui/ux en utilisant le code html css et js

Barbara Streisand

Libérer： 2024-12-25 14:18:10

original

321 Les gens l'ont consulté

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

<!DOCTYPE html>
<html lang="fr">
<tête>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <titre>Curseur mobile</titre>
    <style>
        corps {
            marge : 0 ;
            remplissage : 0 ;
            famille de polices : Arial, sans empattement ;
            affichage : flexible ;
            justifier-contenu : centre ;
            aligner les éléments : centre ;
            hauteur : 100vh ;
            arrière-plan : dégradé linéaire (vers le bas, #1a1a2e, #16213e) ;
            couleur : blanc ;
        }

        .slider-conteneur {
            affichage : flexible ;
            flex-wrap : envelopper ;
            écart : 10 px ;
            largeur : 500 px ;
            justifier-contenu : espacer uniformément ;
            aligner les éléments : centre ;
        }

        .slider-item {
            affichage : flexible ;
            direction flexible : colonne ;
            aligner les éléments : centre ;
            justifier-contenu : centre ;
            position : relative ;
            largeur : 80 px ;
            hauteur : 80px ;
            arrière-plan : #1f4068 ;
            rayon de bordure : 50 % ;
            transition : facilité de transformation de 0,3 s, facilité d'ombre de boîte de 0,3 s, facilité d'arrière-plan de 0,3 s ;
            box-shadow : 0 4px 6px rgba(0, 0, 0, 0.2);
            curseur : pointeur ;
        }

        .slider-item: survol {
            transformation : échelle (1.1);
            box-shadow : 0 6px 10px rgba(0, 0, 0, 0.3);
        }

        .slider-item.active {
            arrière-plan : dégradé linéaire (à droite, #ff7e5f, #feb47b) ; /* Dégradé attrayant pour les actifs */
            transformation : échelle (1.2); /* Taille légèrement plus grande */
            ombre de la boîte : 0 8px 12px rgba(255, 126, 95, 0,5) ;
        }

        .slider-item i {
            taille de police : 28 px ;
            couleur : blanc ;
        }

        .slider-item span {
            marge supérieure : 8 px ;
            /* taille de police : 8px ; */
            couleur : blanc ;
            alignement du texte : centre ;
        }

        .étiquette {
            taille de police : 12 px ;
            marge gauche : 15 px ;
            couleur : blanc ;
            marge supérieure : 10 px ;
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
&Lt;/tête>
<corps>
    <div>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!