探索CSS3打造动人旋转椭圆的奥秘

2023-10-07 00:40:23

1. 椭圆的出场亮相

椭圆是平面几何中的基本形状之一，它具有独特的曲线之美。使用CSS3可以轻松创建椭圆，通过设置不同的CSS属性，可以自定义椭圆的大小、颜色和位置。让我们看看如何通过CSS来绘制一个椭圆：

div {
  width: 200px;
  height: 100px;
  border: 1px solid black;
  border-radius: 50% 50%;
  background-color: #f00;
}

这段代码创建了一个宽200像素、高100像素的椭圆，它有一个红色的背景和一个黑色的边框。椭圆的圆角半径设置为50%，这意味着它的宽度和高度都是椭圆的半径。

2. 动画启动：旋转起来！

现在，让我们让这个椭圆动起来！使用CSS3的animation属性，我们可以让椭圆围绕其中心旋转。以下是如何实现此效果的代码：

div {
  animation: rotation 2s infinite linear;
}

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

这段代码创建了一个名为“rotation”的动画，该动画持续2秒，并且循环播放。在动画的开始，椭圆没有旋转。在动画的结束，椭圆旋转了360度，回到了它的初始位置。动画的“linear”参数指定了动画的速度是均匀的。

3. 椭圆随心所欲，轨迹由你定

除了基本的旋转外，我们还可以通过改变transform属性的值来改变椭圆的轨迹。例如，以下代码可以让椭圆绕着一个固定的点旋转：

div {
  animation: orbit 2s infinite linear;
}

@keyframes orbit {
  from {
    transform: rotate(0deg) translate(0, 0);
  }
  to {
    transform: rotate(360deg) translate(100px, 100px);
  }
}