Sekarang saya telah mempelajari efek transisi, saya mulai memiliki kesadaran membuat efek animasi, dan saya akan menyadari beberapa gadget yang lebih mempesona. Menambahkan efek animasi transisi ke halaman web akan membuat orang terlihat cantik, tidak kaku, dan melihat dengan baik. Animasi adalah salah satu manifestasi utama dari keindahan halaman web. Berikut adalah beberapa contoh lotre menggunakan efek transisi untuk dicapai.
Pertama mari kita ambil rendering:
Implementasi ini membutuhkan beberapa kode JS.
Gambar yang diperlukan:
Gambar ini ada di lokasi Pointer.png.
Turntable-bg.jpg Gambar ini adalah gambar latar belakang, di posisi latar belakang.
Gambar ini ada di lokasi turntable.png.
Ketiga gambar ini diperlukan. Jika Anda ingin mengimplementasikannya, cukup simpan ketiga gambar ini dan perkenalkan ke dalamnya. Jika tidak, harap modifikasi ke nama gambar yang sesuai dan masukkan ke dalam file yang sama.
Kode:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> Rilis Lotre </itement> <!-Berikut ini adalah bagian CSS-> <tyle> #bg {lebar: 650px; Tinggi: 600px; margin: 0 otomatis; Latar Belakang: URL (turntable-bg.jpg) No-Repeat; Posisi: kerabat; } img [src^= "pointer"] {position: absolute; z-index: 10; Atas: 155px; Kiri: 247px; } img [src^= "turntable"] {position: absolute; z-index: 5; Atas: 60px; Kiri: 116px; Transisi: Semua 4s; } </tyle> </head> <body> <!-Berikut ini adalah bagian struktur html-> <div id = "bg"> <img src = "pointer.png"> <img src = "turntable.png"> </div> <!-di sini adalah bagian js-<script>; document.png. var oturntable = document.getElementsbyTagname ("img") [1]; var kucing = 51.4; var num = 0; var offon = true; document.title = ""; opointer.onClick = function () {if (offon) {oturntable.style.transform = "rotate (0deg)"; Offon =! Offon; Ratating (); }} rationing fungsi () {var timer = null; var rdm = 0; clearInterval (timer); timer = setInterval (function () {if (math.floor (rdm/360) <3) {rdm = math.floor (math.random ()*3600);} else {oTurntable.style.transform = "rotate ("+rdm+"deg)"; clearinterval (function =) (function) ("function ("+rdm+"deg)"; clearInterval (function (function) (function ("+rdm+"; deg); clearInterval (function (function) (function) (function ("+rdm+"; num = rdm%360; if (num <= Cat*5) {alert (Layanan bebas bunga "); } </script> </body> </html>Tidak ada banyak kode CSS dan HTML, terutama untuk mencapai pengaturan transisi, dan untuk mengimplementasikan penentuan posisi kaskade, sehingga elemen diposisikan untuk mendapatkan klik elemen dan peristiwa, dan penunjuk klik akan berputar, jadi Anda perlu menambahkan acara klik ke pointer, dan kemudian menentukan apakah rotasi berhenti. Jika tidak ada klik, Anda tidak dapat memanggil fungsi peringkat (). Fungsi ini melakukan rotasi meja putar dan menentukan di mana pointer dihentikan, dan kemudian muncul konten yang sesuai. Proses menerapkan rotasi dalam fungsi adalah untuk mendapatkan elemen dari turntable, dan kemudian menggunakan JS untuk mengontrol atribut CSS-transform: rotate (). Bukankah kita menggunakan properti ini untuk secara langsung mencapai efek rotasi di CSS? Ini diimplementasikan dengan pemilih kelas semu: atribut hover dan transisi. Oleh karena itu, karena CSS tidak dapat mengimplementasikan operasi angka dan klik mouse, biarkan JS menerapkan dan mengontrol atribut CSS untuk mewujudkan fungsi rotasi klik. Namun, penggunaan timer belum lagi timer. Idenya adalah menggunakan JS untuk mengimplementasikan operasi angka, klik mouse dan kontrol atribut CSS untuk mencapai efek rotasi.
Math.random () adalah generasi bilangan acak, dan math.floor () putaran ke bawah.
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.