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

前语

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

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

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动画时，需求对不同方向的边框设置其色彩特点

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

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

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

  • 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;

效果如下：

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

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

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

此时现已能看出loading动画的大致姿态了，下一步是让“盒子”滚动起来。

CSS动画

关于使用CSS生成动画，需求先界说关键帧

关键帧 @keyframes 规则经过在动画序列中界说关键帧（或 waypoints）的款式来操控 CSS 动画序列中的中间步骤。
咱们需求让停止的圆形“盒子”滚动一圈，所以关于关键帧能够这样界说：

用CSS写一个loading - CSS盒模型 | 青训营笔记
意为初始状况不滚动，到滚动一圈结束这一帧。

然后为“盒子”设置 animation 特点：

animation: rotate 600ms infinite linear;

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

具体效果

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

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

小结

这篇笔记记录了CSS盒模型有关的概念以及特点，然后经过设置盒模型相关的特点、结合CSS动画制造了一个简易的loading动画。
假如需求让loading动画依据实践的加载情况进行显现（比方进度条款式的loading），则需求结合JavaScript进行进一步的设计。

2022/7/24