HTML5 mewujudkan efek animasi rentetan terminal seluler

1. Edit konten individual, hitung lebarnya sendiri, dan tentukan posisi awal.

2. Jarak yang dipindahkan adalah lebar layar

3.js secara dinamis menambahkan fungsi animasi css untuk mengontrol ketinggian, waktu pergerakan animasi, dan waktu tunda animasi dengan angka acak.

(Ambil tiga contoh. Jika menurut Anda antarmukanya terlalu panjang dan tidak ramah, Anda juga dapat membuatnya secara dinamis dengan js)

 <div class=rentetan lucu> <div class=barrage-div> <img src=http://kw1-1253445850.file.myqcloud.com/static/image/stimg_7656dc02eb1cd13adbacbdd2695dc3a8.jpg/> <span>Periode pembayaran bulanan Huabei telah tiba<i>Hahaha</i></span> </div> <div class=barrage-div> <img src=http://kw1-1253445850 .file.myqcloud. com/static/image/stigma_632fecdcb52417cb8ab89fa283e07281.jpg/> <span>Menunggu gaji<i>Hehehe</i></span> </div> <div class=barrage-div> <img src=../../static/cutePresent/resource/avatar.png / > <span>Menjadi kaya, menjadi kaya<i>Ya ya ya</i></span> </div></div>

.cute-barrage menentukan rentang dan posisi tampilan, lebarnya 100%, tingginya disesuaikan, dan bagian di luar arah horizontal disembunyikan.

.barrage-div bagian konten, panjangnya ditentukan oleh konten, dan posisi relatif terhadap induk ditentukan

 html,body{ width:100%;}.cute-barrage{ lebar: 100%; tinggi: 4rem; /*menentukan panjang rentetan*/ posisi: absolut; rentetan*/ kiri : 0; overflow-x: tersembunyi; /*Sembunyikan bagian berlebih horizontal*/ .barrage-div{ posisi: absolut: 0 kanan: -100%; /* Pastikan di luar antarmuka di awal, dari kanan ke kiri adalah kanan, dari kiri ke kanan adalah kiri*/ height: 0.6rem; background-color: rgba(255, 255, 255, 0.9); radius: 2rem; spasi putih: nowrap; /*Pastikan konten ditampilkan dalam satu baris, jika tidak maka konten akan terbungkus saat dipindahkan ke akhir*/ img{ width: 0.5rem height: 0.5rem; perataan vertikal: tengah; //Elemen blok sebaris, perataan tengah padding-kiri: 0,05rem; radius batas: 50%; } span{ ukuran font: 14 piksel; //Elemen blok sebaris, empat elemen rata tengah sangat diperlukan. tinggi: 0,6rem; //Elemen blok sebaris, empat elemen rata tengah sangat diperlukan. inline-block; //Elemen blok sebaris, empat perataan sebaris sangat diperlukan perataan vertikal: tengah; //Elemen blok sebaris, empat perataan sebaris sangat diperlukan i{ color: #fe5453;

 //Barrage var winWidth = $(window).width(); //Dapatkan lebar layar $(.barrage-div).each(function(index,value){ //Melintasi setiap rentetan var width = $( value) .width(); //Dapatkan lebar rentetan saat ini var topRandom = Math.floor(Math.random() * 3) + 'rem'; //Dapatkan angka acak 0,1,2 dan ubah sesuai situasi $(value).css({right:-width,top:topRandom}); //Pindahkan rentetan ke luar layar, tepat di luar posisi // Fungsi bingkai animasi ejaan, ingatlah bahwa setiap ani harus dibedakan, dan lebar berpindah dari lebar negatifnya sendiri sejauh jarak seluruh layar var keyframes = `/ @keyframes ani${index}{ form{ kanan:${-lebar}px } ke{ kanan:${winWidth}px; Tambahkan ke tag head halaman $(<style>).attr(type,text/css).html(keyframes).appendTo($(head)); //Tentukan daftar kecepatan animasi var aniList = [3,5,7,9,11]; //Mendapatkan angka acak dari array, 0,1,2,3,4 var aniTime =Math.floor(Math.random() * 5); Berikan Saat menambahkan animasi css ke rentetan depan penuh //Waktu tunda masing-masing *1,5 kali, variabel ini $(value).css({animation:`ani${index} ${aniList[aniTime]}s linier ${index * 1.5}s`,-webkit-animasi:`ani${index} ${aniList[aniTime]}s linier ${index * 1.5}s`});})

Di atas adalah implementasi HTML5 dari efek animasi rentetan seluler yang diperkenalkan oleh editor. Saya harap ini dapat membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan pesan kepada saya dan editor akan membalas Anda tepat waktu. Saya juga ingin mengucapkan terima kasih kepada semua orang atas dukungan Anda terhadap situs seni bela diri VeVb!

Jika menurut Anda artikel ini bermanfaat, silakan cetak ulang, harap sebutkan sumbernya, terima kasih!