Question

我想在中心点周围旋转文字（附在滚动位置）。我不想要的是旋转和不可读的物品。他们应该在圆形路径上移动。你有什么想法我能做到吗？

我使用Skrollr作为我的滚动动画，但我对任何事情都开放。

Answer 1

只是想到你可以使用普通的css关键帧来实现这一目标。您可以在某个事件上触发父元素上的类，并将动画设置为仅在应用此类时才会发生。我做了一个简单的片段来演示。不确定这是否适合你的情况。

@keyframes circle {
    from { transform:rotate(0deg); }
    to { transform:rotate(360deg); }
}

@keyframes inner-circle {
    from { transform:rotate(0deg); }
    to { transform:rotate(-360deg); }
}

.wrapper {
  position: relative;
  width: 400px;
  height: 400px;
  background-color: #CCCCCC;
  border-radius: 50%;
  font-size:12px;
  animation: circle 5s linear infinite;
}

img {
  width: 75px;
  height: 75px;
}

.div1 {
    position: absolute;
    width:100px;
    height:100px;
    margin: 20px auto 0;
    transform-origin:50% 50%;
}

.div2 {
    position: absolute;
    width:100px;
    height:100px;
    margin: 275px auto 0;
    color:red;
    transform-origin:50% 50%;
}

.div3 {
    width:100px;
    height:100px;
    margin: 20px auto 0;
    color:blue;
    transform-origin:50% 200px;
}

.div4 {
    width:100px;
    height:100px;
    margin: 20px auto 0;
    color:green;
    transform-origin:50% 200px;
}

div > div {
    animation: inner-circle 5s linear infinite;
}

<div class="wrapper">
  <div class="div1">
    <img src="https://cdn0.iconfinder.com/data/icons/star-wars/512/darth_vader-128.png" />
    <p>
      This is some text lorem
    </p>
  </div>
  <div class="div2">
    <img src="https://cdn0.iconfinder.com/data/icons/star-wars/512/darth_vader-128.png" />
    <p>
      This is some text lorem
    </p>
  </div>
</div>

旋转文本项目周围没有旋转

1 个答案: