cari

Rumah >hujung hadapan web >tutorial js >Animasi Skrin Pintar menggunakan html css dan javascript

Animasi Skrin Pintar menggunakan html css dan javascript

Linda Hamilton
Linda Hamiltonasal
2024-11-21 13:52:35873semak imbas

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>

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!

JavaScript css html using pointer location display position overflow margin border viewport background transform transition animation flex
Kenyataan：
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
Artikel sebelumnya：Mengapa Imej Tempatan Saya Tidak Dimuatkan dalam Apl Reaksi Saya?Artikel seterusnya：Mengapa Imej Tempatan Saya Tidak Dimuatkan dalam Apl Reaksi Saya?

Artikel berkaitan

Lihat lagi