效果可以通过CSS的@keyframes动画和JavaScript配合实现。下面是一种实现方式:
HTML代码:
<div class="typing-effect">Hello World</div>
CSS代码:
.typing-effect {
white-space: nowrap;
overflow: hidden;
animation: typing 8s steps(12) infinite;
}
@keyframes typing {
from { width: 0; }
to { width: 100%; }
}
上述代码中,通过CSS的@keyframes定义了一个名为"typing"的动画,从宽度为0逐渐增加到100%,实现了文字的逐字打印效果。将此动画应用到具有".typing-effect"类的div上。
为了在较小设备上移动该div,可以在JavaScript中监听窗口大小变化的事件,并根据设备宽度来决定div的位置。以下是一个示例:
JavaScript代码:
window.addEventListener('resize', function() {
moveDiv();
});
function moveDiv() {
var windowWidth = window.innerWidth;
var divWidth = document.querySelector('.typing-effect').offsetWidth;
if (windowWidth < divWidth) {
var maxTranslateX = windowWidth - divWidth;
var randomTranslateX = Math.floor(Math.random() * (maxTranslateX + 1));
document.querySelector('.typing-effect').style.transform = 'translateX(' + randomTranslateX + 'px)';
} else {
document.querySelector('.typing-effect').style.transform = 'none';
}
}
// 初始加载时调用一次
moveDiv();
以上代码中,通过监听窗口大小变化的事件,调用moveDiv函数来移动div的位置。首先获取窗口宽度和div的宽度,然后判断窗口宽度是否小于div宽度,若是,则随机生成一个范围内的横向位移值,将div平移相应的距离。若窗口宽度大于等于div宽度,则不进行位移操作。
这样就实现了在较小设备上移动的打字机效果。请注意,此处没有提及具体的腾讯云产品和链接地址,因为与此问题的关联较弱,不适合强行引入。
领取专属 10元无门槛券
手把手带您无忧上云