يحقق HTML5 تأثير الرسوم المتحركة لوابل المحطة الطرفية المتنقلة

1. قم بتحرير المحتوى الفردي، وحساب العرض الخاص به، وتحديد الموضع الأولي.

2. المسافة المنقولة هي عرض الشاشة

يضيف 3.js ديناميكيًا وظائف الرسوم المتحركة بتنسيق CSS للتحكم في الارتفاع ووقت حركة الرسوم المتحركة ووقت تأخير الرسوم المتحركة بأرقام عشوائية.

(خذ ثلاثة كمثال. إذا كنت تعتقد أن الواجهة طويلة جدًا وغير ودية، فيمكنك أيضًا إنشاؤها ديناميكيًا باستخدام js)

 <div class=cute-barrage> <div class=barrage-div> <img src=http://kw1-1253445850.file.myqcloud.com/static/image/stimg_7656dc02eb1cd13adbacbdd2695dc3a8.jpg/> <span>جاءت فترة سداد Huabei الشهرية<i>هاهاها</i></span> </div> <div class=barrage-div> <img src=http://kw1-1253445850 .file.myqcloud. كوم/ثابت/صورة/stimg_632fecdcb52417cb8ab89fa283e07281.jpg/> <span>في انتظار الراتب<i>Hehehe</i></span> </div> <div class=barrage-div> <img src=../../static/cutePresent/resource/avatar.png / > <span>كن ثريًا، كن ثريًا<i>نعم نعم نعم</i></span> </div></div>

يحدد .cute-barrage نطاق العرض وموضعه، ويكون العرض 100%، ويتم تخصيص الارتفاع، ويتم إخفاء الجزء الذي يقع خارج الاتجاه الأفقي.

جزء المحتوى .barrage-div، يتم تحديد الطول حسب المحتوى، ويتم تحديد الموضع بالنسبة للأصل

 html,body{ width:100%;}.cute-barrage{ width: 100% height: 4rem; /*تحديد طول الوابل*/ الموضع: مطلق; barrage*/ left : 0; overflow-x: protected; /* تأكد من أنه خارج الواجهة في البداية، من اليمين إلى اليسار هو اليمين، ومن اليسار إلى اليمين*/ height: 0.6rem border-color: rgba(255, 255, 255, 0.9); radius: 2rem; محاذاة عمودية: وسط؛ // عناصر الكتلة المضمنة، لا غنى عن أربعة عناصر محاذاة للوسط height: 0.6rem; inline-block; // عناصر الكتلة المضمنة، لا غنى عن أربعة محاذاة مضمنة عموديًا: middle;

 // الوابل var winWidth = $(window).width(); // احصل على عرض الشاشة $(.barrage-div).each(function(index,value){ // اجتياز كل وابل var width = $( value) .width(); // احصل على عرض الوابل الحالي var topRandom = Math.floor(Math.random() * 3) + 'rem'; // احصل على الأرقام العشوائية 0، 1، 2 وقم بتغييرها وفقًا للحالة $(value).css({right:-width,top:topRandom}); // انقل الوابل إلى خارج الشاشة, ما وراء الموضع مباشرةً // تهجئة وظيفة إطار الرسوم المتحركة، وتذكر التمييز بين كل ani، وتحريك العرض من عرضه السلبي بمقدار مسافة الشاشة بأكملها var keyframes = `/ @keyframes ani${index}{ form{ right: ${-العرض} بكسل } إلى { right:${winWidth}px } }/ @-webkit-keyframes ani${index}{ form{ right:${-width}px } to{ right:${winWidth}px }`; أضف إلى علامة رأس الصفحة $(<style>).attr(type,text/css).html(keyframes).appendTo($(head)); // تحديد قائمة سرعة الرسوم المتحركة var aniList = [3,5,7,9,11]; // احصل على أرقام عشوائية من المصفوفة، 0,1,2,3,4 var aniTime =Math.floor(Math.random() * 5); Give عند إضافة الرسوم المتحركة CSS إلى الوابل الأمامي الكامل // وقت التأخير هو * 1.5 مرة لكل منهما، هذا المتغير $(value).css({animation:`ani${index} ${aniList[aniTime]}s خطي ${index * 1.5}s`,-webkit-animation:`ani${index} ${aniList[aniTime]}s خطي ${index * 1.5}s`});})

ما ورد أعلاه هو تطبيق HTML5 لتأثيرات الرسوم المتحركة لوابل الهاتف المحمول التي قدمها المحرر، وآمل أن يكون ذلك مفيدًا لك. إذا كانت لديك أي أسئلة، فيرجى ترك رسالة لي وسيقوم المحرر بالرد عليك في الوقت المناسب. أود أيضًا أن أشكر الجميع على دعمكم لموقع VeVb للفنون القتالية!

إذا كنت تعتقد أن هذه المقالة مفيدة لك، فنحن نرحب بإعادة طبعها، يرجى الإشارة إلى المصدر، شكرًا لك!