仅使用 CSS 旋转即可实现令人着迷的动画🧘‍♀️

我在 Codepen 上用旋转做了一个奇葩的 CSS 动画，效果还挺不错的。结果它在 Reddit 上火了一把，所以我决定在这里分享一下我的制作方法 :)

步骤 1

我们先跳过没人看过的介绍，直接进入正题。第一步是用 CSS 创建阴阳图。
一图胜千言，请看下面的插图：

我们有一个主圆，它是，div两个小圆分别是::before和::after的伪元素div。这三个元素中有border-radius50% 是圆。

主 div 已background-image设置为linear-gradient：(to left, #fff, #fff 50%, #000 50%, #000)。这样，div 应该是一半白色一半黑色。

另外两个圆圈的很大border-width，并且颜色border-color与背景色相反（例如，白色圆圈配黑色边框）。这样，我们就不需要太多的 HTML 元素，而且更容易将它们放置在中心（一个在另一个之上）。

有了这些，尝试自己完成剩下的动画部分应该会是一个很好的练习。你可以回到这里比较一下这些实现 ;)

接下来，我们需要一个容器div（也是一半黑色一半白色）和另一个阴阳（两者应该一个叠在另一个上面）。看一下：

至此，我们几乎完成了，接下来要做的就是让阴阳沿着容器的反方向进行动画div。为此，我们可以使用animation-directionCSS 属性并将其设置为reverse。

CSS 动画如下所示：



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

最终代码如下：

这篇文章就到这里。希望你喜欢。如果喜欢，请分享给你的朋友和同事，并在 Twitter 上关注我@theAngularGuy，我会在这里发布关于 Web 开发和计算机科学的推文。

祝你今天过得愉快！