Известно, что 20 частей контента должны иметь эффект заграждения, разделенные на три слоя, а скорость случайна. Сначала посмотрим на эффект:
Поэтому заполнение сгенерированных здесь не рассматривается. Просто демонстрационный эффект. Если вы хотите увидеть, что вы заполнили, не теряйте времени.
Идеикод
Скелетная структура HTML
(Это слишком долго. Возьмем для примера три. Если вы считаете, что интерфейс слишком длинный и недружелюбный, вы также можете динамически сгенерировать его с помощью js)
<div class=cute-barrage><div class=barrage-div><img src=http://kw1-1253445850.file.myqcloud.com/static/image/stimg_7656dc02eb1cd13adbacbdd2695dc3a8.jpg/><span>Momoda выводит <i>монеты 1 квартала сегодня</i></span></div> <div class=barrage-div><img src=http://kw1-1253445850.file.myqcloud.com/static/image/stimg_632fecdcb52417cb8ab89fa283e07281.jpg/><span>Оранжевый кот с большими ушами забирает сегодня <i>монеты 5Q</i></span>< /div><div class=barrage-div><img src=../../static/cutePresent/resource/avatar.png/><span>丶В оленьем горшке находится пакет с молоком Ву. Выведите <i>монеты 3Q сегодня</i></span></div> </дел>
CSS-стиль
.cute-barrage определяет диапазон и положение отображения, ширина составляет 100%, высота настраивается, а часть за пределами горизонтального направления скрывается.
Часть содержимого .barrage-div , длина определяется содержимым, а положение относительно родителя определяется
html,body{ width:100%;}.cute-barrage{ width: 100%; height: 4rem; /*определяем длину заграждения*/ Position: Absolute; top: /*определяем высоту barrage*/ left: 0; overflow-x: Hidden; /*Скрыть лишнюю часть по горизонтали*/ .barrage-div{ Position: Absolute; Right: -100%; /* Убедитесь, что он находится за пределами интерфейса в начале, справа налево — направо, слева направо — налево*/ height: 0.6rem; background-color: rgba(255, 255, 255, 0.9); радиус: 2rem; пробел: nowrap; /*Убедитесь, что содержимое отображается в одной строке, иначе при перемещении в конец оно будет переноситься*/ img{ width: 0.5rem; height: 0.5rem; вертикальное выравнивание: средний; //Встроенный блочный элемент, выравнивание по центру.padding-left: 0.05rem; border-radius: 50%; //Встроенные блочные элементы, обязательны четыре элемента, выровненные по центру. height: 0.6rem; //Встроенные блочные элементы, обязательны четыре элемента, выровненные по центру: inline-block; //Встроенные блочные элементы, четыре строчных выравнивания обязательны.реализация динамической анимации 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}); //Переместить заграждение за пределы экрана, сразу за позицией // Заклинание функции кадра анимации, помните, что каждый ani должен быть различен, а ширина перемещается от своей собственной отрицательной ширины на расстояние всего экрана var keyframes = `/ @keyframes ani${index}{ form{ вправо: ${-ширина} пикселей } до {; right:${winWidth}px; } }/ @-webkit-keyframes ani${index}{ form{ right:${-width}px; } to { 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); // 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.