css旋转180deg 动画

CSS旋转180度的动画可以通过`transform`属性轻松实现。在CSS中，你可以使用`transform: rotate(180deg)`来对元素进行180度的顺时针旋转。如果你想创建动画效果，可以结合`transition`或`@keyframes`规则。

例如，如果你想要元素在一段时间内平滑地旋转180度，你可以这样写：

/* 使用transition */
.rotate-animation {
  transform: rotate(0deg);
  transition: transform 0.5s ease; /* 这里的0.5s是动画时长，ease是缓动函数，可自定义为linear、ease-in、ease-out等 */
}

.rotate-animation:hover {
  transform: rotate(180deg);
}

/* 或者使用@keyframes动画 */
@keyframes rotate180 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}

.rotate-keyframes {
  animation: rotate180 0.5s ease forwards; /* 前向执行动画，保持180度的位置 */
}

相关问题

css loading旋转加载动画

### 使用 CSS 创建旋转加载动画

为了创建一个简单的旋转加载动画，可以利用 `@keyframes` 定义动画序列，并应用到 HTML 元素上。下面是一个基于提供的HTML结构来制作旋转小球加载动画的例子。

#### HTML 结构
给定的 HTML 需要两个 `<span>` 标签作为子元素放在父级容器内：

<div id="loading">
    <span></span>
    <span></span>
</div>

#### CSS 样式定义
接下来，在样式表中设置这些元素的具体外观以及它们应该如何移动或变化。对于旋转效果来说，主要依赖于 `transform: rotate()` 函数配合 `animation` 属性完成无限循环转动的效果[^2]。

/* 设置外层 div 的尺寸 */
#loading {
    width: 50px;
    height: 50px;
}

/* 给 span 添加圆形背景并居中外边距 */
#loading span {
    display: inline-block;
    background-color: blue;
    border-radius: 50%;
    margin-left: auto;
    margin-right: auto;
    width: 10px;
    height: 10px;
}

/* 定义第一个圆圈的关键帧动画 */
@keyframes spin-one {
    from { transform: translate(20px); }
    to   { transform: translate(20px) rotate(360deg); }
}

/* 应用于第一个 span 上面 */
#loading span:nth-child(1){
    animation-name: spin-one;
    animation-duration: .8s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

上述代码片段展示了如何让其中一个圆点围绕中心位置做匀速圆周运动。第二个圆点可以通过调整其初始偏移量和其他参数来进行不同步调的同步旋转，从而形成更复杂的视觉体验。

css动画animation 旋转动画

CSS动画中的旋转动画通常通过`@keyframes`规则来创建，它允许你定义一系列关键帧，描述元素从初始状态到最终状态的变化过程，包括旋转的角度。例如：

@keyframes rotate {
  0% { transform: rotate(0deg); } /* 初始位置，元素静止 */
  100% { transform: rotate(360deg); } /* 结束位置，元素完成一圈旋转 */
}

#myElement {
  animation: rotate 2s linear infinite; /* 动画名称、持续时间、速度曲线和是否无限循环 */
}

在这个例子中，`rotate`是一个自定义动画名称，`2s`表示动画播放2秒，`linear`指定动画的速度变化线性，即匀速进行。`infinite`意味着动画会无限次地循环。