CSS与JS都可以实现文字弹幕效果,本文将分别介绍它们的实现方法。//CSS实现文字弹幕效果 .barrage { position: absolute; top: 50%; white-space:
CSS与JS都可以实现文字弹幕效果,本文将分别介绍它们的实现方法。
//CSS实现文字弹幕效果
.barrage {
position: absolute;
top: 50%;
white-space: nowrap;
pointer-events: none;
transform: translate(0, -50%);
animation: move 5s linear infinite;
}
@keyframes move {
from {
transform: translateX(100vw);
}
to {
transform: translateX(-100%);
}
}
CSS实现文字弹幕效果主要是利用position:absolute;将弹幕定位到页面的中央,然后使用animation来控制弹幕的运动方式。关键是利用transform属性来实现弹幕的水平运动。
//JS实现文字弹幕效果
const barrageBox = document.querySelector('.barrage-box');
const input = document.querySelector('.text-input');
const btn = document.querySelector('.btn');
btn.addEventListener('click', () => {
const barrage = document.createElement('span');
barrage.classList.add('barrage');
barrage.innerText = input.value;
barrageBox.appendChild(barrage);
animateBarrage(barrage);
});
function animateBarrage(node) {
const random = Math.floor(Math.random() * 3 - 1);
const duration = 5000 + random * 1000;
const distance = window.innerWidth + 100 + node.offsetWidth;
const randomY = Math.floor(Math.random() * window.innerHeight);
node.style.top = `${randomY}px`;
node.style.transition = `transform ${duration}ms linear`;
node.style.transform = `translateX(-${distance}px)`;
node.addEventListener('transitionend', () => {
node.remove();
});
}
JS实现文字弹幕效果主要是利用DOM操作动态添加弹幕节点,并且使用CSS的transform属性来控制弹幕的运动方式。关键是使用transition属性来实现弹幕的运动轨迹和持续时间,以及transitionend事件来控制弹幕节点的移除。
粉丝
0
关注
0
收藏
0