当前位置：首页 > 文章列表 > 文章 > 前端 > HTML5动画制作教程详解

HTML5动画制作教程详解

2025-11-25 18:11:52 0浏览收藏

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

最简单的加载动画无需 JavaScript，仅靠 HTML 和 CSS 就能完成。常见的是旋转圆圈或齿轮效果。

先在 HTML 中添加一个容器：

然后用 CSS 实现旋转动画：

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

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

这个效果利用边框颜色差异和 transform: rotate 实现持续旋转，适合小型加载提示。

使用SVG制作更精致的加载图标

SVG 支持矢量缩放，适合高分辨率屏幕。你可以设计一个圆形进度条动画。

示例代码：

stroke-dasharray="125.6" stroke-dashoffset="0" class="spinner">

CSS 动画控制第二条弧线旋转：

.spinner {
  animation: dash 1.5s ease-in-out infinite;
}

@keyframes dash {
  0% { stroke-dashoffset: 0; }
  50% { stroke-dashoffset: -62.8; }
  100% { stroke-dashoffset: -125.6; }
}

这种做法常用于现代 Web 应用，视觉更细腻，支持颜色渐变和路径动画。

结合JavaScript控制显示与隐藏

加载动画通常需要在页面资源加载完成后自动隐藏。可以用 JavaScript 监听页面加载事件。

HTML 结构：

JavaScript 控制逻辑：

window.addEventListener('load', function() {
document.getElementById('loader').style.display = 'none';
document.getElementById('content').style.display = 'block';
});

你也可以监听 AJAX 请求，在数据获取前后显示或隐藏动画。