HTML5 ตระหนักถึงเอฟเฟกต์แอนิเมชั่นเขื่อนกั้นน้ำของเทอร์มินัลมือถือ

1. แก้ไขเนื้อหาแต่ละรายการ คำนวณความกว้างของตัวเอง และกำหนดตำแหน่งเริ่มต้น

2. ระยะทางที่ย้ายคือความกว้างของหน้าจอ

3.js เพิ่มฟังก์ชันภาพเคลื่อนไหว css แบบไดนามิกเพื่อควบคุมความสูง เวลาการเคลื่อนไหวของภาพเคลื่อนไหว และเวลาหน่วงเวลาของภาพเคลื่อนไหวด้วยตัวเลขสุ่ม

(ยกตัวอย่างสามข้อ หากคุณคิดว่าอินเทอร์เฟซยาวเกินไปและไม่เป็นมิตร คุณสามารถสร้างมันแบบไดนามิกด้วย js ได้)

 <div class=cute-เขื่อนกั้นน้ำ> <div class=เขื่อนกั้นน้ำ-div> <img src=http://kw1-1253445850.file.myqcloud.com/static/image/stimg_7656dc02eb1cd13adbacbdd2695dc3a8.jpg/> <span>ระยะเวลาชำระคืนของ Huabei รายเดือนอยู่ที่นี่แล้ว<i>555</i></span> </div> <div class=barrage-div> <img src=http://kw1-1253445850 .file.myqcloud com/static/image/stimg_632fecdcb52417cb8ab89fa283e07281.jpg/> <span>รอเงินเดือนอยู่<i>อิอิ</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; /*กำหนดความยาวของเขื่อน*/ ตำแหน่ง: ด้านบน: 1.5rem; เขื่อนกั้นน้ำ*/ ซ้าย : 0; overflow-x: ซ่อนเร้น; /*ซ่อนส่วนที่เกินในแนวนอน*/ .barrage-div{ ตำแหน่ง: สัมบูรณ์; ขวา: -100%; /* ตรวจสอบให้แน่ใจว่าอยู่นอกอินเทอร์เฟซตั้งแต่เริ่มต้น จากขวาไปซ้ายคือขวา จากซ้ายไปขวาคือซ้าย*/ ความสูง: 0.6rem; สีพื้นหลัง: rgba(255, 255, 255, 0.9); รัศมี: 2rem; white-space: nowrap; /*ตรวจสอบให้แน่ใจว่าเนื้อหาแสดงอยู่ในบรรทัดเดียว ไม่เช่นนั้นเนื้อหาจะตัดเมื่อย้ายไปที่จุดสิ้นสุด*/ img{ width: 0.5rem; แนวตั้ง: กลาง; // องค์ประกอบบล็อกแบบอินไลน์, ระยะห่างจากขอบซ้าย: 0.05rem; // องค์ประกอบบล็อกแบบอินไลน์ องค์ประกอบที่จัดกึ่งกลางเป็นสิ่งที่ขาดไม่ได้: // องค์ประกอบบล็อกแบบอินไลน์ การจัดตำแหน่งแบบอินไลน์ที่ขาดไม่ได้ในแนวตั้ง: กลาง;

 //Barrage var winWidth = $(window).width(); //รับความกว้างของหน้าจอ $(.barrage-div).each(function(index,value){ //สำรวจแต่ละ barrage 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: ${-width}px } ถึง{ right:${winWidth}px; } }/ @-webkit-keyframes ani${index}{ form{ right:${-width}px; } ถึง { right:${winWidth}px } }`; เพิ่มลงในแท็ก head ของหน้า $(<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); ให้ เมื่อเพิ่มแอนิเมชัน css ลงในเขื่อนด้านหน้าแบบเต็ม // เวลาหน่วงคือ *1.5 เท่าของแต่ละรายการ ตัวแปร $(value).css({animation:`ani${index} ${aniList[aniTime]} เชิงเส้นนี้ ${index * 1.5}s`,-webkit-animation:`ani${index} ${aniList[aniTime]}s เชิงเส้น ${index * 1.5}s`});})

ข้างต้นคือการใช้เอฟเฟกต์แอนิเมชั่นเขื่อนกั้นน้ำบนมือถือ HTML5 ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันแล้วโปรแกรมแก้ไขจะตอบกลับคุณทันเวลา ฉันอยากจะขอบคุณทุกคนที่ให้การสนับสนุนเว็บไซต์ศิลปะการต่อสู้ VeVb!

หากคุณคิดว่าบทความนี้มีประโยชน์สำหรับคุณ คุณสามารถพิมพ์ซ้ำได้ โปรดระบุแหล่งที่มา ขอขอบคุณ!