Togol Suis menyeronokkan menggunakan html css dan javascript-tutorial js-php.cn

Togol Suis menyeronokkan menggunakan html css dan javascript

Patricia Arquette

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

asal

971 orang telah melayarinya

Toggle Switches fun using html css and javascript

<!DOCTYPE html>
<html lang="en">
<kepala>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Togol Suis dengan Logik</title>
    <gaya>
        badan {
            paparan: flex;
            flex-direction: lajur;
            align-item: tengah;
            justify-content: pusat;
            ketinggian: 100vh;
            warna latar belakang: #121212;
            warna: #fff;
            font-family: Arial, sans-serif;
        }
        .toggle-container {
            paparan: flex;
            align-item: tengah;
            jidar: 20px 0;
        }
        .toggle-label {
            jidar-kiri: 10px;
            saiz fon: 1.2rem;
            warna latar belakang: rgb(64, 109, 94);
            padding: 5px;

        }
        .suis {
            kedudukan: relatif;
            paparan: inline-block;
            lebar: 50px;
            ketinggian: 25px;
        }
        .tukar input {
            kelegapan: 0;
            lebar: 0;
            ketinggian: 0;
        }
        .slider {
            jawatan: mutlak;
            kursor: penunjuk;
            atas: 0;
            kiri: 0;
            kanan: 0;
            bawah: 0;
            warna latar belakang: #555;
            jejari sempadan: 25px;
            peralihan: 0.4s;
        }
        .slider:sebelum {
            jawatan: mutlak;
            kandungan: "";
            ketinggian: 20px;
            lebar: 20px;
            kiri: 3px;
            bawah: 2.5px;
            warna latar belakang: putih;
            jejari sempadan: 50%;
            peralihan: 0.4s;
        }
        input:checked .slider {
            warna latar belakang: #4caf50;
        }
        input:checked .slider:before {
            transform: translateX(24px);
        }
        .box{
            ketinggian: 250px;
            lebar: 300px;
            warna latar belakang: rgb(8, 72, 51);
            jejari sempadan: 10px;
            padding:5px;
        }
    </style>
</head>
<badan>
    <div>

Salin selepas log masuk

Atas ialah kandungan terperinci Togol Suis menyeronokkan menggunakan html css dan javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!