Question

这是我第一次在这里问问题，我发现了一些相似的问题，但没有解决我的问题。

我正在尝试从屏幕外的左侧向屏幕外的右侧旋转一个单词。单词的中心应为旋转点（即单词从屏幕左侧旋转到右侧）。我尝试使用了transformX的变体并旋转，但是它要么在原地旋转，要么从左向右移动。当它确实从屏幕的左侧向右侧移动时，它会不断扩大屏幕的边界并在其循环回到左侧之前对其进行拉伸。有什么想法可以解决这个问题吗？看起来很简单，但是动画太糟糕了。

.move {
position: absolute;
animation: moveword 10s infinite linear;
}

.spin {
position: absolute;
animation: spin 7s infinite linear;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes moveword {
    from {
        left: -10%;
    }
    to {
        left: 95%;
    }
}

Answer 1

根据您提供的代码，我假设您可以进行如下操作。
overflow: hidden需要应用于单独的元素，而不是<body>，因为它会限制滚动。

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.page {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.word {
  position: absolute;
  top: 5px;
  left: 5px;
  animation: word-anim 10s infinite linear;
}

@keyframes word-anim {
  0% {
    transform: translateX(0px) rotateZ(0deg);
  }
  
  70% {
    transform: translateX(70vw) rotateZ(360deg);
  }
  
  100% {
    transform: translateX(100vw) rotateZ(360deg);
  }
}

<div class="page">
  <span class="word">A word</span>
</div>

如何使用CSS在屏幕上反复为滚动元素设置动画？

1 个答案: