语义 UI 图标旋转变化

在设计语义 UI （Semantic UI）主题中，图标通常扮演着至关重要的角色，以便向用户传达意图和操作。图标的旋转变化则是一种常用的交互效果，可以动态地指示状态、进度和方向。

使用方法

在 Semantic UI 中，图标的旋转变化可以通过添加类名实现，具体的类名格式为：

<icon class="icon icon name rotating"></icon>

其中，"icon name" 是图标的名称（例如 caret down），而 rotating 则表示旋转变化效果。

以下是常用的一些图标名称：

• angle up
• angle down
• angle left
• angle right
• caret up
• caret down
• caret left
• caret right
• circle
• circle notch
• spinner

示例

下面是一个基本的示例，显示了一个具有旋转变化效果的caret up图标：

<icon class="icon caret up rotating"></icon>

添加 rotating 类名之后，图标会动态旋转，向用户传达一个正在进行的操作。

自定义样式

你可以使用自定义样式调整图标旋转效果。例如，你可以使用 CSS 3 转换效果来实现更加平滑的旋转动画：

.rotating {
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

在上面的代码中，我们定义了一个名为 rotate 的关键帧动画，将图标沿着 Z 轴旋转 360 度，并且让它在 2 秒内从头到尾线性变化。我们把这个动画应用到了具有 rotating 类名的图标上。

结论

图标旋转变化是一种非常常见的交互效果，可以帮助我们向用户传达一个正在进行的操作。在 Semantic UI 中，添加 rotating 类名即可轻松实现这一效果，同时我们也可以使用自定义样式来调整图标的旋转效果。