如何在 css3 中编写此动画？

Question

我上次在 html 和 css 中编码已经有很长时间了，那是在那可爱的 html5 和 css3 之前。所以，在 2000 年代初期，我们制作了一个 gif 格式的徽标，非常酷，我刚刚在我的 PC 上找到了它。最好转换为纯 css，而不是 limited-size-gif，但我不知道如何启动它。 Here is my animated gif

您能给我第一印象吗，我应该为它选择哪 css3 个属性？谢谢

Answer 1

您可能希望使用带有自定义关键帧的动画属性。这是一个粗略的例子。我没有花太多时间在动画上。那是你的工作 ;)

https://codepen.io/bygrace1986/pen/POypXX

HTML

<div class="logo" data-logo="wp"></div>

CSS

.logo {
  position: relative;
  width: 2em;
  height: 2em;
  font-size: 5em;
  font-family: arial;
  font-weight: bold;
  font-style: italic;
  text-transform: uppercase;
}

.logo::before, .logo::after {
  content: attr(data-logo);
  position: absolute;
  z-index: -1;
  left: 0;
}

.logo::before {
  color: red;
  animation: rotate 1s infinite;
}

.logo::after {
  color: black;
  animation: rotate 1s infinite reverse;
}

@keyframes rotate { 
  0% {
    left: 0;
    top: 0;
  }
  25% {
    left: 10%;
  }
  50% {
    top: 10%;
  }
  75% {
    left: 0;
  }
  100% {
    top: 0;
  }
}

如何在 css3 中编写此动画？

How to code this animation in css3?

css

animation

gif