HTML5代码如何制作加载动画 HTML5代码CSS3关键帧的定义-html教程-PHP中文网

HTML5代码如何制作加载动画 HTML5代码CSS3关键帧的定义

蓮花仙者

发布： 2025-10-20 15:18:01

原创

596人浏览过

使用HTML5和CSS3的@keyframes可创建加载动画，通过定义旋转等关键帧并应用到div容器实现流畅效果。

html5代码如何制作加载动画 html5代码css3关键帧的定义

加载动画在网页中很常见，通常用于内容加载时提升用户体验。使用 HTML5 和 CSS3 的关键帧（@keyframes）可以轻松创建流畅的动画效果。

HTML 结构：创建加载动画容器

用一个简单的 div 元素作为加载动画的容器：

这个 div 不需要任何内容，仅作为动画展示元素。

CSS3 关键帧：定义动画过程

@keyframes 是 CSS3 提供的规则，用来定义动画从开始到结束的各个阶段。

立即学习“前端免费学习笔记（深入）”；

例如，创建一个旋转动画：

代码小浣熊

代码小浣熊是基于商汤大语言模型的软件智能研发助手，覆盖软件需求分析、架构设计、代码编写、软件测试等环节

查看详情

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

这里定义了一个名为 spin 的动画，元素从 0 度旋转到 360 度。

应用动画到加载元素

将上面定义的关键帧应用到 .loader 元素上，并设置外观：

.loader {
  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 属性调用 spin 动画，持续 1 秒，线性播放，无限循环

完整示例代码

<!DOCTYPE html>
<html>
<head>
<style>
.loader {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 100px auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
  <div class="loader"></div>
</body>
</html>

基本上就这些。通过组合 HTML 结构和 CSS3 的 @keyframes，你可以制作出各种加载动画，比如脉冲、跳动、进度条等，只需修改关键帧中的属性即可。

以上就是HTML5代码如何制作加载动画 HTML5代码CSS3关键帧的定义的详细内容，更多请关注php中文网其它相关文章！