首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使div在较小设备上移动的打字机

效果可以通过CSS的@keyframes动画和JavaScript配合实现。下面是一种实现方式:

HTML代码:

代码语言:txt
复制
<div class="typing-effect">Hello World</div>

CSS代码:

代码语言:txt
复制
.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代码:

代码语言:txt
复制
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宽度,则不进行位移操作。

这样就实现了在较小设备上移动的打字机效果。请注意,此处没有提及具体的腾讯云产品和链接地址,因为与此问题的关联较弱,不适合强行引入。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券