Maison >interface Web >js tutoriel >Animation d'écran intelligent utilisant HTML CSS et Javascript

Animation d'écran intelligent utilisant HTML CSS et Javascript

Linda Hamiltonoriginal: 2024-11-21 13:52:35866parcourir

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>

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!

JavaScript css html using pointer location display position overflow margin border viewport background transform transition animation flex

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Pourquoi mes images locales ne se chargent-elles pas dans mon application React ?Article suivant：Pourquoi mes images locales ne se chargent-elles pas dans mon application React ?

Articles Liés

Voir plus