用CSS写一个loading - CSS盒模型 | 青训营笔记

🐣前言

这是我参与「第四届青训营」笔记创作活动的的第2天😺

CSS (Cascading Style Sheet, 层叠样式表) 的入门对新手来说较为友好，但想要熟悉和精通还是需要进行不少的实践。在字节跳动第四届青训营前端方向的授课中，老师不仅带大家学习了CSS的基础知识，还对CSS的深入内容进行了讲解。
我将选取部分笔记、结合个人实践，根据CSS的盒模型制作一个简单的loading动画。

📦CSS盒模型

打开浏览器的开发者工具，选中样式并将内容下拉，可以看到一个这样的盒子：

这就是CSS的盒模型，最中间的蓝色部分为盒模型的“content”部分，从外到内分别为“margin”、“border”、“padding”、“content”。

在CSS中，把放在页面上的元素看成一个个盒子，可以对盒子的属性进行设置，从而调节元素的样式。

⚠️attention！盒模型的属性并不是对所有元素都适用，如width和height属性对行级元素不适用。

盒模型属性

• width 宽

  取值为长度、百分数、auto

  • 百分数：相对于容器的width
  • auto 由浏览器根据其它属性确定
  • 容器有指定的宽度时，百分数才生效

• height 高

  取值为长度、百分数、auto

  • 百分数：相对于容器的height
  • auto 由浏览器根据其它属性确定
  • 容器有指定的高度时，百分数才生效

• padding 内边距

  百分数相对于容器的宽度

• border 边框

  指定容器边框样式、粗细和颜色，如：

  #box1 {

  /*border-width border-style border-color*/

  border:1px solid black;

  }

  也可根据具体方向对指定方向的边进行设置（top、bottom、left、right）

  ⚠️在制作这一简单的loading动画时，需要对不同方向的边框设置其颜色属性

  放置一个“盒子”，将其不同方向的边框设置为不同颜色：

• margin 外边距

  • 取值可以是长度、百分数、auto

  • 百分数相对于容器宽度

  • 🍂margin的合并（margin collapse）

    垂直方向上，对于两个相邻且都设置了margin的元素，两元素间的边距取margin间的最大值

盒模型类型

标准盒模型

对于标准盒模型来说，

• width = content宽度
• height = content高度

怪异盒模型

对于怪异盒模型来说，

• width = content宽度 + padding + border
• height = content高度 + padding + border

类型选择

对于选择标准盒模型还是怪异盒模型，可以通过设置属性box-sizing进行规定：

• 标准盒模型：box-sizing:content-box
• 怪异盒模型：box-sizing:border-box

该属性的默认值为content-box

🏃loading动画

盒模型的应用

首先设置一个大小合适的盒子，将其相邻的两条边设置为同一颜色，比如：

• top和right设置为蓝色：
  border-top:20px solid cornflowerblue;
border-right:20px solid cornflowerblue;

• bottom和left设置为白灰色：
  border-bottom:20px solid whitesmoke;
border-left:20px solid whitesmoke;

效果如下：

然后设置盒子的 border-radius 属性，当其设置为 50% 时，可使边框变为圆形：

此时已经能看出loading动画的大致样子了，下一步是让“盒子”转动起来。

CSS动画

对于使用CSS生成动画，需要先定义关键帧

关键帧 @keyframes 规则通过在动画序列中定义关键帧（或 waypoints）的样式来控制 CSS 动画序列中的中间步骤。

我们需要让静止的圆形“盒子”转动一圈，所以对于关键帧可以这样定义：

意为初始状态不转动，到转动一圈结束这一帧。

然后为“盒子”设置 animation 属性：

animation: rotate 600ms infinite linear;

意为对于绑定的关键帧 rotate 在600ms内完成，这一动作重复无限次(infinite)，动画从头到尾的速度是相同的(linear)。

具体效果

下面就是一个制作好的简易loading动画：

🐠小结

这篇笔记记录了CSS盒模型有关的概念以及属性，然后通过设置盒模型相关的属性、结合CSS动画制作了一个简易的loading动画。
如果需要让loading动画根据实际的加载情况进行显示（比如进度条样式的loading），则需要结合JavaScript进行进一步的设计。💨

2022/7/24