1. 개별 콘텐츠를 편집하고, 자체 너비를 계산하고, 초기 위치를 결정합니다.
2. 이동한 거리가 화면 너비입니다.
3.js에는 높이, 애니메이션 이동 시간, 애니메이션 지연 시간을 난수로 제어하는 CSS 애니메이션 기능을 동적으로 추가합니다.
암호: HTML 뼈대 구조(예를 들어 3개를 들어보겠습니다. 인터페이스가 너무 길고 친숙하지 않다고 생각되면 js를 사용하여 동적으로 생성할 수도 있습니다.)
<div class=cute-barrage> <div class=barrage-div> <img src=http://kw1-1253445850.file.myqcloud.com/static/image/stimg_7656dc02eb1cd13adbacbdd2695dc3a8.jpg/> <span>월별 화베이 상환 기간이 왔습니다<i>하하하</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>CSS 스타일
.cute-barrage는 표시 범위와 위치를 결정하며 너비는 100%, 높이는 사용자 정의하고 가로 방향을 벗어난 부분은 숨깁니다.
.barrage-div 콘텐츠 부분, 길이는 콘텐츠에 따라 결정되며 상위 항목을 기준으로 한 위치가 결정됩니다.
html,body{ width:100%;}.cute-barrage{ width: 100%; height: 4rem; /*포격의 길이 결정*/ position: 절대; 1.5rem; barrage*/ left : 0; Overflow-x: Hidden; /*가로 초과 부분 숨기기*/ .barrage-div{ position: abstract: 0; /* 처음에는 인터페이스 외부에 있는지 확인하세요. 오른쪽에서 왼쪽이 오른쪽이고 왼쪽에서 오른쪽이 왼쪽입니다*/ height: 0.6rem background-color: rgba(255, 255, 255, 0.9); radius: 2rem; white-space: nowrap; /*내용이 한 줄에 표시되는지 확인하세요. 그렇지 않으면 끝으로 이동할 때 줄 바꿈됩니다.*/ img{ width: 0.5rem; 수직 정렬: 중간; //인라인 블록 요소, 중앙 정렬 padding-left: 0.05rem; border-radius: 50%; }span{ 글꼴 크기: 14px: 0.1rem; //인라인 블록 요소, 중앙 정렬 요소 4개는 필수입니다. height: 0.6rem; //인라인 블록 요소, 중앙 정렬 요소 4개는 필수입니다. inline-block; //인라인 블록 요소, 4개의 인라인 정렬은 필수입니다. Vertical-align: //인라인 블록 요소, 4개의 인라인 정렬은 필수입니다. i{ color: #fe5453; } } } Node.js 동적 애니메이션 구현(zepto.js) //포격 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}) //탄격을 화면 바깥쪽으로 이동하고, 위치 바로 너머 // 애니메이션 프레임 함수를 철자하고, 각 애니를 구별하고 너비를 자체 음수 너비에서 전체 화면 거리만큼 이동하는 것을 기억하세요. var keyframes = `/ @keyframes ani${index}{ form{ right: ${-width}px } ~{ right:${winWidth}px; } }/ @-webkit-keyframes ani${index}{ form{ right:${-width}px } to{ right:${winWidth} }`; 페이지의 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) // 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 무술 웹사이트를 지원해 주신 모든 분들께 감사드립니다!
이 글이 도움이 되셨다면 재인쇄하셔도 좋고, 출처를 밝혀주시면 감사하겠습니다!