页面加载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可替换元素，因为其外观和尺寸有外部资源决定，那么如果外部资源正确加载，就会替换掉其内部内容，这时伪元素也会被替换掉，但是当外部资源加载失败时，设置的伪元素是可以起作用的。
-
伪元素可以清除浮动