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