如何使用CSS实现加载动画_spinner关键帧与transform技巧

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

如何使用CSS实现加载动画_spinner关键帧与transform技巧

2025-11-11

浏览次数：次

返回列表

答案：通过@keyframes定义旋转动画并结合transform属性，可创建流畅的CSS圆形加载动画。首先构建一个div元素作为spinner，利用@keyframes设置0%到100%的rotate变化实现360度旋转；接着将动画绑定至.spinner类，设定1秒线性无限循环，配合border差异色形成视觉焦点，border-radius确保为正圆；使用transform而非传统属性提升性能，因支持硬件加速；还可扩展pulse-spin动画加入scale变化实现缩放旋转效果。关键在于合理配置动画帧与合成属性以保证流畅性与兼容性。

如何使用css实现加载动画_spinner关键帧与transform技巧

实现一个流畅的加载动画（spinner）并不复杂，关键在于合理使用 @keyframes 定义动画帧，并结合 transform 属性实现平滑旋转或缩放效果。下面一步步教你如何用纯CSS创建常见的圆形旋转加载动画。

1. 创建基本HTML结构

一个简单的div元素即可作为加载指示器：

2. 使用@keyframes定义旋转动画

通过 @keyframes 设置从0%到100%的旋转变化。这里使用 transform: rotate() 实现持续转动。

示例代码：

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

这个动画会让元素顺时针完整旋转一圈。

3. 应用动画到spinner元素

将上面定义的动画绑定到spinner类，并设置动画时长、线性过渡和无限循环。

Tanka

具备AI长期记忆的下一代团队协作沟通工具

146 查看详情 Tanka

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

说明：

border 创建环形轮廓
border-top 设为不同颜色，形成视觉焦点
border-radius: 50% 确保是正圆
animation 参数：动画名、时长、速度曲线、重复次数

4. transform技巧提升性能

使用 transform 而非 left/top 或 width/height 动画，因为 transform 属于合成属性，浏览器会启用硬件加速，动画更流畅。

你也可以扩展动画类型，比如加入缩放脉冲效果：

@keyframes pulse-spin {
  0% {
    transform: rotate(0deg) scale(0.8);
  }
  50% {
    transform: rotate(180deg) scale(1.2);
  }
  100% {
    transform: rotate(360deg) scale(0.8);
  }
}

这样在旋转的同时加入大小变化，适合某些动态风格的设计。

基本上就这些。一个高效、兼容性好的CSS加载动画，核心就是 @keyframes 控制帧动画，搭配 transform 实现高性能视觉变换。不复杂但容易忽略细节，比如border的分布或动画timing-function的选择。