Animation d'écran intelligent utilisant HTML CSS et Javascript-js tutoriel-php.cn

Animation d'écran intelligent utilisant HTML CSS et Javascript
Linda Hamilton
Libérer： 2024-11-21 13:52:35
original
794 Les gens l'ont consulté
Smart Screen Animation using html css and javascript
<!DOCTYPE html>
<html lang="fr">
<tête>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <titre>Menu de l'écran intelligent</titre>
    <style>
        corps {
            affichage : flexible ;
            justifier-contenu : centre ;
            aligner les éléments : centre ;
            hauteur : 100vh ;
            couleur d'arrière-plan : #1c1c1e ;
            marge : 0 ;
            débordement : caché ;
        }

        .menu-conteneur {
            position : relative ;
            largeur : 250 px ;
            hauteur : 250px ;
        }

        .fond-cercle {
            position : absolue ;
            haut : 50 % ;
            gauche : 50 % ;
            transformer : traduire (-50 %, -50 %) échelle (0 );
            largeur : 200 px ;
            hauteur : 200px ;
            couleur d'arrière-plan : #ffffff30 ;
            rayon de bordure : 50 % ;
            transition : transformation en douceur en 0,4 s ;
        }

        .centre-btn {
            position : absolue ;
            haut : 50 % ;
            gauche : 50 % ;
            transformer : traduire (-50 %, -50 %);
            largeur : 60 px ;
            hauteur : 60px ;
            couleur d'arrière-plan : #009688 ; /* Couleur sarcelle */
            rayon de bordure : 50 % ;
            affichage : flexible ;
            justifier-contenu : centre ;
            aligner les éléments : centre ;
            couleur : #ffffff ;
            taille de police : 24 px ;
            curseur : pointeur ;
            transition : facilité de transformation de 0,3 s, facilité de couleur d'arrière-plan de 0,3 s ;
        }

        .center-btn.open-icon::avant {
            contenu: '?'; /* Développer l'icône */
        }

        .center-btn.close-icon :: avant {
            contenu: '?'; /* Icône Réduire */
        }

        .center-btn: survol {
            transformer : traduire (-50 %, -50 %) échelle (1.1);
            couleur d'arrière-plan : #00695c ;
        }

        .option {
            position : absolue ;
            haut : 50 % ;
            gauche : 50 % ;
            transformer : traduire (-50 %, -50 %) échelle (0 );
            largeur : 50 px ;
            hauteur : 50px ;
            couleur d'arrière-plan : #2c2c2e ;
            rayon de bordure : 50 % ;
            affichage : flexible ;
            justifier-contenu : centre ;
            aligner les éléments : centre ;
            couleur : #aaa ;
            taille de police : 18 px ;
            curseur : pointeur ;
            opacité : 0 ;
            transition : toutes les 0,4 s sont faciles ;
        }

        .option.selected {
            couleur d'arrière-plan : #ffdd59 ;
            couleur : #000 ;
        }

        .option.selected :: avant {
            contenu: '';
            position : absolue ;
            haut : -15px ;
            affichage : bloc ;
            largeur : 5px ;
            hauteur : 5px ;
            couleur d'arrière-plan : #ffdd59 ;
            rayon de bordure : 50 % ;
        }.option.selected :: après {
            contenu: '';
            position : absolue ;
            haut : -8px ;
            largeur : 15px ;
            hauteur : 3px ;
            couleur d'arrière-plan : #ffdd59 ;
            transformer : traduire (-3px, 10px);
        }

        .option : survoler {
            couleur d'arrière-plan : #ffd93d ;
            couleur : #000 ;
        }

        /* Cercle extérieur et animation à partir du centre */
        .menu-container.open .background-circle {
            transformer : traduire (-50 %, -50 %) échelle (1 );
        }

        .menu-container.open .option {
            opacité : 1 ;
            événements de pointeur : tous ;
        }

        /* Positions individuelles des icônes */
        .brightness { transform: traduire(-50%, -50%) traduire(-100px, 0); }
        .wifi { transformer : traduire (-50 %, -50 %) traduire (-70px, -70px); }
        .airplane { transform : traduire (-50 %, -50 %) traduire (0, -100px); }
        .bluetooth { transformer : traduire (-50 %, -50 %) traduire (70px, -70px); }
        .flashlight { transformer : traduire (-50%, -50%) traduire (100px, 0); }
        .location { transform: traduire(-50%, -50%) traduire(70px, 70px); }
        .dnd { transformer : traduire (-50%, -50%) traduire (0, 100px); }
        .screenshot { transformer : traduire (-50 %, -50 %) traduire (-70px, 70px); }

        .menu-container.open .brightness { transform: traduire(-50%, -50%) traduire(-100px, 0) échelle(1); }
        .menu-container.open .wifi { transformation : traduire (-50 %, -50 %) traduire (-70px, -70px) échelle (1); }
        .menu-container.open .airplane { transform: traduire (-50%, -50%) traduire (0, -100px) échelle (1); }
        .menu-container.open .bluetooth { transformation : traduire (-50 %, -50 %) traduire (70px, -70px) échelle (1); }
        .menu-container.open .flashlight { transform: traduire (-50%, -50%) traduire (100px, 0) échelle (1); }
        .menu-container.open .location { transform: traduire(-50%, -50%) traduire(70px, 70px) scale(1); }
        .menu-container.open .dnd { transform: traduire (-50%, -50%) traduire (0, 100px) échelle (1); }
        .menu-container.open .screenshot { transformation : traduire (-50 %, -50 %) traduire (-70px, 70px) échelle (1); }
    </style>
&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!