Smart Screen Animation mit HTML-CSS und Javascript-js-Tutorial-php.cn

Smart Screen Animation mit HTML-CSS und Javascript
Linda Hamilton
Freigeben： 2024-11-21 13:52:35
Original
794 Leute haben es durchsucht
Smart Screen Animation using html css and javascript
<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Smart Screen-Menü</title>
    <Stil>
        Körper {
            Anzeige: Flex;
            rechtfertigen-Inhalt: Mitte;
            align-items: center;
            Höhe: 100 Vh;
            Hintergrundfarbe: #1c1c1e;
            Rand: 0;
            Überlauf: versteckt;
        }

        .menu-container {
            Position: relativ;
            Breite: 250px;
            Höhe: 250px;
        }

        .background-circle {
            Position: absolut;
            oben: 50 %;
            links: 50 %;
            transform: Translate(-50%, -50%) Scale(0);
            Breite: 200px;
            Höhe: 200px;
            Hintergrundfarbe: #ffffff30;
            Randradius: 50 %;
            Übergang: Transformation 0,4 s Ease-Out;
        }

        .center-btn {
            Position: absolut;
            oben: 50 %;
            links: 50 %;
            transform: Translate(-50%, -50%);
            Breite: 60px;
            Höhe: 60px;
            Hintergrundfarbe: #009688; /* Blaugrüne Farbe */
            Randradius: 50 %;
            Anzeige: Flex;
            rechtfertigen-Inhalt: Mitte;
            align-items: center;
            Farbe: #ffffff;
            Schriftgröße: 24px;
            Cursor: Zeiger;
            Übergang: Transformation 0,3 Sekunden, Hintergrundfarbe 0,3 Sekunden;
        }

        .center-btn.open-icon::before {
            Inhalt: '?'; /* Symbol erweitern */
        }

        .center-btn.close-icon::before {
            Inhalt: '?'; /* Symbol ausblenden */
        }

        .center-btn:hover {
            transform: Translate(-50%, -50%) Scale(1.1);
            Hintergrundfarbe: #00695c;
        }

        .option {
            Position: absolut;
            oben: 50 %;
            links: 50 %;
            transform: Translate(-50%, -50%) Scale(0);
            Breite: 50px;
            Höhe: 50px;
            Hintergrundfarbe: #2c2c2e;
            Randradius: 50 %;
            Anzeige: Flex;
            rechtfertigen-Inhalt: Mitte;
            align-items: center;
            Farbe: #aaa;
            Schriftgröße: 18px;
            Cursor: Zeiger;
            Deckkraft: 0;
            Übergang: alle 0,4 Sekunden erleichtern;
        }

        .option.selected {
            Hintergrundfarbe: #ffdd59;
            Farbe: #000;
        }

        .option.selected::before {
            Inhalt: '';
            Position: absolut;
            oben: -15px;
            Anzeige: Block;
            Breite: 5px;
            Höhe: 5px;
            Hintergrundfarbe: #ffdd59;
            Randradius: 50 %;
        }.option.selected::after {
            Inhalt: '';
            Position: absolut;
            oben: -8px;
            Breite: 15px;
            Höhe: 3px;
            Hintergrundfarbe: #ffdd59;
            transform: Translate(-3px, 10px);
        }

        .option:hover {
            Hintergrundfarbe: #ffd93d;
            Farbe: #000;
        }

        /* Äußerer Kreis und Animation von der Mitte */
        .menu-container.open .background-circle {
            transform: Translate(-50%, -50%) Scale(1);
        }

        .menu-container.open .option {
            Deckkraft: 1;
            Zeigerereignisse: alle;
        }

        /* Individuelle Positionen von Icons */
        .brightness { transform: Translate(-50%, -50%) Translate(-100px, 0); }
        .wifi { transform: Translate(-50%, -50%) Translate(-70px, -70px); }
        .airplane { transform: Translate(-50%, -50%) Translate(0, -100px); }
        .bluetooth { transform: Translate(-50%, -50%) Translate(70px, -70px); }
        .flashlight { transform: Translate(-50%, -50%) Translate(100px, 0); }
        .location { transform: Translate(-50%, -50%) Translate(70px, 70px); }
        .dnd { transform: Translate(-50%, -50%) Translate(0, 100px); }
        .screenshot { transform: Translate(-50%, -50%) Translate(-70px, 70px); }

        .menu-container.open .brightness { transform: Translate(-50%, -50%) Translate(-100px, 0) Scale(1); }
        .menu-container.open .wifi { transform: Translate(-50%, -50%) Translate(-70px, -70px) Scale(1); }
        .menu-container.open .airplane { transform: Translate(-50%, -50%) Translate(0, -100px) Scale(1); }
        .menu-container.open .bluetooth { transform: Translate(-50%, -50%) Translate(70px, -70px) Scale(1); }
        .menu-container.open .flashlight { transform: Translate(-50%, -50%) Translate(100px, 0) Scale(1); }
        .menu-container.open .location { transform: Translate(-50%, -50%) Translate(70px, 70px) Scale(1); }
        .menu-container.open .dnd { transform: Translate(-50%, -50%) Translate(0, 100px) Scale(1); }
        .menu-container.open .screenshot { transform: Translate(-50%, -50%) Translate(-70px, 70px) Scale(1); }
    </style>
</head>
<Körper>
    <div>
Nach dem Login kopieren
Das obige ist der detaillierte Inhalt vonSmart Screen Animation mit HTML-CSS und Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!