Animasi Skrin Pintar menggunakan html css dan javascript-tutorial js-php.cn

Animasi Skrin Pintar menggunakan html css dan javascript
Linda Hamilton
Lepaskan： 2024-11-21 13:52:35
asal
868 orang telah melayarinya
Smart Screen Animation 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>Menu Skrin Pintar</title>
    <gaya>
        badan {
            paparan: flex;
            justify-content: pusat;
            align-item: tengah;
            ketinggian: 100vh;
            warna latar belakang: #1c1c1e;
            margin: 0;
            limpahan: tersembunyi;
        }

        .menu-container {
            kedudukan: relatif;
            lebar: 250px;
            ketinggian: 250px;
        }

        .background-circle {
            jawatan: mutlak;
            atas: 50%;
            kiri: 50%;
            mengubah: terjemah(-50%, -50%) skala(0);
            lebar: 200px;
            ketinggian: 200px;
            warna latar belakang: #ffffff30;
            jejari sempadan: 50%;
            peralihan: mengubah 0.4s mudah keluar;
        }

        .center-btn {
            jawatan: mutlak;
            atas: 50%;
            kiri: 50%;
            mengubah: terjemah(-50%, -50%);
            lebar: 60px;
            ketinggian: 60px;
            warna latar belakang: #009688; /* Warna Teal */
            jejari sempadan: 50%;
            paparan: flex;
            justify-content: pusat;
            align-item: tengah;
            warna: #ffffff;
            saiz fon: 24px;
            kursor: penunjuk;
            peralihan: mengubah 0.3s mudah, latar belakang-warna 0.3s mudah;
        }

        .center-btn.open-icon::before {
            kandungan: '?'; /* Kembangkan ikon */
        }

        .center-btn.close-icon::before {
            kandungan: '?'; /* Ikon Runtuhkan */
        }

        .center-btn:hover {
            mengubah: terjemah(-50%, -50%) skala(1.1);
            warna latar belakang: #00695c;
        }

        .pilihan {
            jawatan: mutlak;
            atas: 50%;
            kiri: 50%;
            mengubah: terjemah(-50%, -50%) skala(0);
            lebar: 50px;
            ketinggian: 50px;
            warna latar belakang: #2c2c2e;
            jejari sempadan: 50%;
            paparan: flex;
            justify-content: pusat;
            align-item: tengah;
            warna: #aaa;
            saiz fon: 18px;
            kursor: penunjuk;
            kelegapan: 0;
            peralihan: semua 0.4s mudah;
        }

        .option.selected {
            warna latar belakang: #ffdd59;
            warna: #000;
        }

        .option.selected::before {
            kandungan: '';
            jawatan: mutlak;
            atas: -15px;
            paparan: blok;
            lebar: 5px;
            ketinggian: 5px;
            warna latar belakang: #ffdd59;
            jejari sempadan: 50%;
        }.option.selected::selepas {
            kandungan: '';
            jawatan: mutlak;
            atas: -8px;
            lebar: 15px;
            ketinggian: 3px;
            warna latar belakang: #ffdd59;
            transform: translate(-3px, 10px);
        }

        .option:hover {
            warna latar belakang: #ffd93d;
            warna: #000;
        }

        /* Bulatan luar dan animasi dari pusat */
        .menu-container.open .background-circle {
            mengubah: terjemah(-50%, -50%) skala(1);
        }

        .menu-container.open .option {
            kelegapan: 1;
            pointer-events: semua;
        }

        /* Kedudukan individu ikon */
        .brightness { transform: translate(-50%, -50%) translate(-100px, 0); }
        .wifi { transform: translate(-50%, -50%) translate(-70px, -70px); }
        .kapal terbang { transform: translate(-50%, -50%) translate(0, -100px); }
        .bluetooth { transform: translate(-50%, -50%) translate(70px, -70px); }
        .lampu suluh { transform: translate(-50%, -50%) translate(100px, 0); }
        .lokasi { 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) skala(1); }
        .menu-container.open .airplane { transform: translate(-50%, -50%) translate(0, -100px) skala(1); }
        .menu-container.open .bluetooth { transform: translate(-50%, -50%) translate(70px, -70px) skala(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) skala(1); }
        .menu-container.open .dnd { transform: translate(-50%, -50%) translate(0, 100px) skala(1); }
        .menu-container.open .screenshot { transform: translate(-50%, -50%) translate(-70px, 70px) skala(1); }
    </style>
</head>
<badan>
    <div>
Salin selepas log masuk
Atas ialah kandungan terperinci Animasi Skrin Pintar menggunakan html css dan javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!