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. 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; /*определяем длину заграждения*/ Position: Absolute; top: /*определяем высоту barrage*/ left: 0; overflow-x: Hidden; /*Скрыть лишнюю часть по горизонтали*/ .barrage-div{ позиция: верх: 0; -100%; /* Убедитесь, что он находится за пределами интерфейса в начале, справа налево — направо, слева направо — налево*/ height: 0.6rem; background-color: rgba(255, 255, 255, 0.9); radius: 2rem; white-space: nowrap; /*Убедитесь, что содержимое отображается в одной строке, иначе при перемещении в конец оно будет переноситься*/ img{ width: 0.5rem; height: 0.5rem; вертикальное выравнивание: средний; //Встроенный блочный элемент, выравнивание по центру: 0.05rem; border-radius: 50%; //Встроенные блочные элементы, обязательны четыре элемента, выровненные по центру. height: 0.6rem; //Встроенные блочные элементы, обязательны четыре элемента, выровненные по центру: inline-block; //Встроенные блочные элементы, четыре строчных выравнивания обязательны.

 //Заграждение 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: ${-ширина} пикселей } до { 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`});})

Вышеуказанное представляет собой HTML5-реализацию эффектов анимации заграждения для мобильных устройств, представленную редактором. Надеюсь, это будет вам полезно. Если у вас есть какие-либо вопросы, оставьте мне сообщение, и редактор ответит вам вовремя. Я также хотел бы поблагодарить всех за поддержку сайта боевых искусств VeVb!

Если вы считаете, что эта статья вам полезна, вы можете ее перепечатать, укажите источник, спасибо!