页面加载loading动画
body部分
<div class="box"><div class="box1"></div><div class="box1"></div><div class="box1"></div><div class="box1"></div><div class="box1"></div></div>
css部分
*{margin: 0;padding: 0;box-sizing: border-box;}body{width: 100%;height: 100vh;display: flex;background: gray;justify-content: center;align-items: center;}.box{display: flex;}.box .box1{width: 20px;height: 20px;border-radius: 50%;background: #fff;margin: 5px;position: relative;}.box1::before{content: '';width: 100%;height: 100%;position: absolute;background: #fff;border-radius: 50%;animation: g 1s ease-out infinite;} .box1:nth-child(1){background: khaki;}.box1:nth-child(2){background: red;}.box1:nth-child(3){background: black;}.box1:nth-child(4){background: blue;}.box1:nth-child(5){background: hotpink;}.box1:nth-child(1)::before{animation-delay: 0s;}.box1:nth-child(2)::before{animation-delay: 0.2s;}.box1:nth-child(3)::before{animation-delay: 0.4s;}.box1:nth-child(4)::before{animation-delay: 0.6s;}.box1:nth-child(5)::before{animation-delay: 0.8s; /*延迟时间*/}@keyframes g{50%,70% {transform: scale(2.5);}80%,100% {opacity: 0;}}
效果如下
总结分析：这个小案例主要用了：before伪元素
什么是伪元素呢？
css的伪元素，之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。如下图，是伪元素在html代码机构中的展现，可以看出无法伪元素的结构无法。
常见的伪元素
css有一系列的伪元素，如:before，:after，:first-line，:first-letter 等
本案例所用到的伪元素:before，:after，它们的用法：
在真正页面元素内部之前和之后添加新内容。
使用伪元素注意事项
伪元素:before和:after添加的内容默认是inline元素；这个两个伪元素的content属性，表示伪元素的内容,设置:before和:after时必须设置其content属性，否则伪元素就不起作用。
伪元素的特点
伪元素不属于文档，所以js无法操作它
伪元素属于主元素的一部分，因此点击伪元素触发的是主元素的click事件
原文说块级元素才能有:before, :after，其实是不妥的，大部分行级元素也可以设置伪元素，但是像img可替换元素，因为其外观和尺寸有外部资源决定，那么如果外部资源正确加载，就会替换掉其内部内容，这时伪元素也会被替换掉，但是当外部资源加载失败时，设置的伪元素是可以起作用的。
伪元素可以清除浮动
