Diketahui 20 konten harus memiliki efek rentetan, dibagi menjadi tiga lapisan, dan kecepatannya acak. Mari kita lihat efeknya terlebih dahulu:
Oleh karena itu, pengisian yang dihasilkan tidak dipertimbangkan di sini. Hanya efek tampilan. Jika Anda ingin melihat apa yang Anda isi, mohon jangan buang waktu Anda.
Idekode
struktur kerangka html
(Terlalu panjang. Ambil tiga sebagai contoh. Jika menurut Anda antarmukanya terlalu panjang dan tidak ramah, Anda juga dapat membuatnya secara dinamis dengan js)
<div class=rentetan lucu><div class=rentetan-div><img src=http://kw1-1253445850.file.myqcloud.com/static/image/stimg_7656dc02eb1cd13adbacbdd2695dc3a8.jpg/><span>Momoda menarik <i>1Q koin hari ini</i></span></div> <div kelas=rentetan-div><img src=http://kw1-1253445850.file.myqcloud.com/static/image/stimg_632fecdcb52417cb8ab89fa283e07281.jpg/><span>Kucing oranye dengan telinga besar menarik <i>koin 5Q hari ini</i></span>< /div><div class=rentetan-div><img src=../../static/cutePresent/resource/avatar.png/><span>丶Panci rusa berisi kantong susu Wu. Tarik <i>koin 3Q hari ini</i></span></div> < /div>
gaya css
.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;implementasi animasi dinamis js (zepto.js)
//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`});})Kemudian lihat efek browser:
Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.