suchen

Heim >Web-Frontend >js-Tutorial >Toggle Switches macht Spaß mit HTML-CSS und Javascript

Toggle Switches macht Spaß mit HTML-CSS und Javascript

Patricia Arquette
Patricia ArquetteOriginal
2024-12-05 14:20:13912Durchsuche

Toggle Switches fun 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>Kippschalter mit Logik</title>
    <Stil>
        Körper {
            Anzeige: Flex;
            Flexrichtung: Spalte;
            align-items: center;
            rechtfertigen-Inhalt: Mitte;
            Höhe: 100 Vh;
            Hintergrundfarbe: #121212;
            Farbe: #fff;
            Schriftfamilie: Arial, serifenlos;
        }
        .toggle-container {
            Anzeige: Flex;
            align-items: center;
            Rand: 20px 0;
        }
        .toggle-label {
            Rand links: 10px;
            Schriftgröße: 1,2rem;
            Hintergrundfarbe: rgb(64, 109, 94);
            Polsterung: 5px;

        }
        .schalten {
            Position: relativ;
            Anzeige: Inline-Block;
            Breite: 50px;
            Höhe: 25px;
        }
        .Schaltereingang {
            Deckkraft: 0;
            Breite: 0;
            Höhe: 0;
        }
        .slider {
            Position: absolut;
            Cursor: Zeiger;
            oben: 0;
            links: 0;
            rechts: 0;
            unten: 0;
            Hintergrundfarbe: #555;
            Randradius: 25px;
            Übergang: 0,4 s;
        }
        .slider:before {
            Position: absolut;
            Inhalt: "";
            Höhe: 20px;
            Breite: 20px;
            links: 3px;
            unten: 2,5px;
            Hintergrundfarbe: weiß;
            Randradius: 50 %;
            Übergang: 0,4 s;
        }
        input:checked .slider {
            Hintergrundfarbe: #4caf50;
        }
        input:checked .slider:before {
            transform: TranslateX(24px);
        }
        .Kasten{
            Höhe: 250px;
            Breite: 300px;
            Hintergrundfarbe: rgb(8, 72, 51);
            Randradius: 10px;
            Polsterung:5px;
        }
    </style>
</head>
<Körper>
    <div>

Das obige ist der detaillierte Inhalt vonToggle Switches macht Spaß mit HTML-CSS und Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript css html switch using pointer display position margin padding border viewport background transform transition column flex input
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：Wie entferne ich einen Ereignis-Listener aus seiner eigenen Definition in JavaScript?Nächster Artikel：Wie entferne ich einen Ereignis-Listener aus seiner eigenen Definition in JavaScript?

In Verbindung stehende Artikel

Mehr sehen