suchen

Heim  >  Artikel  >  Web-Frontend  >  Smart Screen Animation mit HTML-CSS und Javascript

Smart Screen Animation mit HTML-CSS und Javascript

Linda Hamilton
Linda HamiltonOriginal
2024-11-21 13:52:35795Durchsuche

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>

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!

JavaScript css html using pointer location display position overflow margin border viewport background transform transition animation flex
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Warum werden meine lokalen Bilder nicht in meine React-App geladen?Nächster Artikel：Warum werden meine lokalen Bilder nicht in meine React-App geladen?

In Verbindung stehende Artikel

Mehr sehen