旋转飞扬的动态下划线：CSS 动画方向调整指南

2024-02-14 10:08:20

无论是初入 CSS 大门的新手，还是已经掌握了 CSS 精髓的老手，动画效果都是我们共同的挚爱。谁会不喜欢那些动感十足、美轮美奂的动画呢？但你知道吗？仅仅依靠 CSS 动画，我们就可以实现多种多样的动画效果，而不仅仅是那些简单的移动和旋转。

今天，我们将一起探索如何在 CSS 中使用 scale 和 transform-origin 属性来实现动画方向的精准控制，让您的网页动画更加生动和富有创意。

首先，让我们来了解一下 scale 和 transform-origin 这两个属性。

scale 属性可以用来改变元素的大小，而 transform-origin 属性则可以用来设置元素的变换原点。

当我们把这两个属性结合起来使用时，就可以实现一些非常有趣的动画效果。例如，我们可以让元素从某个方向放大或缩小，或者让元素围绕某个点旋转。

现在，让我们回到我们今天的主题：如何使用 CSS scale 和 transform-origin 实现动画方向的精准控制。

为了演示方便，我们先创建一个简单的 HTML 元素，比如一个 div 元素。然后，我们给它添加一个 CSS 类，并使用 scale 和 transform-origin 属性来设置它的动画效果。

<div class="box"></div>

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: example 2s infinite;
}

@keyframes example {
  0% {
    transform: scale(0) translate(-50%, -50%);
  }
  100% {
    transform: scale(1) translate(-50%, -50%);
  }
}

这段代码会创建一个红色的 div 元素，并且让它从一个点放大到原来的大小。动画的原点是元素的中心，所以元素会从中心开始放大。

现在，我们来修改一下 transform-origin 的值，看看会发生什么。

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: example 2s infinite;
}

@keyframes example {
  0% {
    transform: scale(0) translate(-50%, -100%);
  }
  100% {
    transform: scale(1) translate(-50%, -100%);
  }
}