Toggle Switches macht Spaß mit HTML-CSS und Javascript-js-Tutorial-php.cn

Toggle Switches macht Spaß mit HTML-CSS und Javascript

Patricia Arquette

Freigeben： 2024-12-05 14:20:13

Original

946 Leute haben es durchsucht

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>

Nach dem Login kopieren

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!