如何构建一个简单的加载界面

目录

一、css3动画：

二、@keyframes 规则：

三、css的动画属性：

四、构建一个简易的加载界面（示例）

4.1设置父系文本样式：

4.2设置加载器的样式：

4.3动画处理：

最终结果展示：

总结：

能够非常容易地创建简单动画，你甚至不需要了解 JavaScript 就能创建动画。

动画运行效果良好，甚至在低性能的系统上。渲染引擎会使用跳帧或者其他技术以保证动画表现尽可能的流畅。而使用 JavaScript 实现的动画通常表现不佳（除非经过很好的设计）。

让浏览器控制动画序列，允许浏览器优化性能和效果，如降低位于隐藏选项卡中的动画更新频率。

---

一、css3动画：

CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。

二、@keyframes 规则：

@keyframes 规则是创建动画。

@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。

示例：

@keyframes rotate {
    from{}
    to {  transform: rotate(1turn)}
}

三、css的动画属性：

 @keyframes 规则和所有动画属性：

资料源自：

菜鸟教程（css动画）

四、构建一个简易的加载界面（示例）

4.1设置父系文本样式：

4.2设置加载器的样式：

4.3动画处理：

Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

详细信息：https://www.runoob.com/cssref/css3-pr-transform.html

然后把它绑定到一个选择器（在本示例中将其绑定到loading__anim），否则动画不会有任何效果。

指定动画需要多少时间完成，示例：

animation: rotate 600ms infinite linear;

其中，infinite规定无限循环；

           linear规定以相同速度开始至结束的过渡效果

最终结果展示：

VID_20240413_172320

总结：

CSS3动画 使得可以将从一个 CSS 样式配置转换到另一个 CSS 样式配置。动画包括两个部分：描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧。相较于传统的脚本实现动画技术，使用 CSS 动画有三个主要优点：

1. 能够非常容易地创建简单动画，你甚至不需要了解 JavaScript 就能创建动画。

2. 动画运行效果良好，甚至在低性能的系统上。渲染引擎会使用跳帧或者其他技术以保证动画表现尽可能的流畅。而使用 JavaScript 实现的动画通常表现不佳（除非经过很好的设计）。

3. 让浏览器控制动画序列，允许浏览器优化性能和效果，如降低位于隐藏选项卡中的动画更新频率。