CSS3实现动态旋转加载样式

要使用 CSS3 创建一个动态旋转加载样式,可以使用 CSS 动画和旋转变换。下面是一个简单的示例:

HTML:

复制代码
<div class="loader"></div>

CSS:

复制代码
.loader {
  width: 50px;
  height: 50px;
  border: 4px solid #3498db;
  border-top: 4px solid transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto;
}

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

在这个示例中,我们创建了一个带有类名"loader"的<div>元素,并使用 CSS 样式定义了加载器的外观和动画效果。@keyframes 规则定义了一个名为"spin"的动画,它使加载器以线性方式无限旋转。

你可以根据需要调整 width、height、border、animation 等属性来自定义加载器的样式和速度。这只是一个基本示例,你可以根据自己的项目需求进行更多的定制。

相关推荐
墨林陌1 天前
AI 热点日报(2026-11-06):乌镇峰会闭幕发布全球开源AI倡议,腾讯混元Hy4发布即开源
前端
亿元程序员1 天前
8年游戏主程从公司毕业了,能干些啥?
前端
Cosolar1 天前
极简智库(MiniDocs):docsify、VitePress、Notion 等知识库搭建服务的完美替代
前端·后端·架构
涛涛ing1 天前
那些“每个决定都正确”的项目,最后是怎么烂掉的
前端
徐小夕1 天前
万字长文!DeepSeek Super-agent × 企业知识库架构深度拆解与落地实践
前端·vue.js·github
陈随易1 天前
TanStarter,从搭建到支付,一步到位开始赚美元
前端·后端·程序员
前端双越老师1 天前
程序员 1v1 访谈系列第十二期:普通人没有核心竞争力
前端·ai编程·全栈
柳杉1 天前
没有写一行代码:我用 Codex 制作 了一个 3D 智慧展厅可视化大屏
前端·ai编程·three.js
IT_陈寒1 天前
Redis开发实战:从入门到精通
前端·人工智能·后端
恋猫de小郭1 天前
Flutter Impeller Vulkan 内存持续上涨,问题没想到是文字阴影
android·前端·flutter