代碼如下：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>loading效果</title>
<style type="text/css">
*{margin: 0;padding:0;}
div{
width: 50px;
height: 50px;
/*border:1px solid #f00;*/
margin: 100px 100px;
position: absolute;
}
p{
width: 12px;
height: 12px;
border-radius: 50%;
background: #000;
position: absolute;
animation: move 1.5s infinite linear;
}
p:nth-of-type(1){top:0;left: 0}
p:nth-of-type(2){top: 0;right: 0}
p:nth-of-type(3){bottom: 0;right: 0}
p:nth-of-type(4){bottom: 0;left: 0}
div:nth-of-type(2){transform: rotate(45deg);}
@keyframes move{
0%{transform:scale(0);}
50%{transform:scale(1);}
100%{transform:scale(0);}
}
div:nth-of-type(1) p:nth-of-type(1){animation-delay: -0.1s}
div:nth-of-type(2) p:nth-of-type(1){animation-delay: -0.3s}
div:nth-of-type(1) p:nth-of-type(2){animation-delay: -0.5s}
div:nth-of-type(2) p:nth-of-type(2){animation-delay: -0.7s}
div:nth-of-type(1) p:nth-of-type(3){animation-delay: -0.9s}
div:nth-of-type(2) p:nth-of-type(3){animation-delay: -1.1s}
div:nth-of-type(1) p:nth-of-type(4){animation-delay: -1.3s}
div:nth-of-type(2) p:nth-of-type(4){animation-delay: -1.5s}
</style>
</head>
<body>
<div>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
<div>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</body>
</html>
效果如下：
![CSS的僞類與僞元素的差別[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)