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

Rumah

hujung hadapan web

tutorial js

Togol Suis menyeronokkan menggunakan html css dan javascript

Patricia Arquette

Dec 05, 2024 pm 02:20 PM

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!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn