20개의 콘텐츠는 탄막 효과가 있어야 하며 3개의 레이어로 나누어져 있으며 속도는 무작위인 것으로 알려져 있습니다. 먼저 효과를 살펴보겠습니다.
따라서 생성된 항목을 채우는 것은 여기서 고려되지 않습니다. 단지 디스플레이 효과일 뿐입니다. 작성한 내용을 확인하고 싶다면 시간을 낭비하지 마십시오.
아이디어암호
HTML 뼈대 구조
(너무 길어요. 3개를 예로 들어보겠습니다. 인터페이스가 너무 길고 불편하다고 생각되면 js를 사용하여 동적으로 생성할 수도 있습니다.)
<div 클래스=귀여운 연발><div 클래스=연발-div><img src=http://kw1-1253445850.file.myqcloud.com/static/image/stimg_7656dc02eb1cd13adbacbdd2695dc3a8.jpg/><span>Momoda는 <i>오늘 1Q 코인을 인출했습니다</i></span></div> <div 클래스=연발-div><img src=http://kw1-1253445850.file.myqcloud.com/static/image/stimg_632fecdcb52417cb8ab89fa283e07281.jpg/><span>큰 귀를 가진 주황색 고양이가 <i>오늘 5Q 코인을 인출합니다</i></span>< /div><div 클래스=탄막-div><img src=../../static/cutePresent/resource/avatar.png/><span>丶우유주머니에 <i>3Q 코인이 들어있습니다</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{ 오른쪽:${-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`});})그런 다음 브라우저 효과를 살펴보십시오.
위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.