上效果图，用截屏工具制作的，看起来有点卡，在网页上面显示还是不错的。
CSS代码：
<style type="text/css">
.loader{
position: absolute;
width: 2.5em;
height: 2.5em;
//border: 1px solid rgba(100,156,136,0.15);
border-radius: 50%;
//box-shadow: 0 0 0.5em rgba(100,156,136,0.75);
transform: rotate(165deg);
animation:rotate 2s infinite;
}
@keyframes rotate {
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
.loader::before,.loader::after{
content: '';
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 0.5em;
height: 0.5em;
border-radius: 0.25em;
transform: translate(-50%,-50%);
}
.loader::before{
animation: before 2s infinite;
}
@keyframes before {
0%{
width: 0.5em;
box-shadow:
1em -0.5em 0.5em rgba(100,156,136,0.75),
-1em 0.5em 0.5em rgba(150,120,20,0.75);
}
55% {
width: 2.5em;
box-shadow:
0 -0.5em rgba(100,156,136,0.75),
0 0.5em rgba(150,120,20,0.75);
}
70% {
width: 0.5em;
box-shadow:
-1em -0.5em rgba(100,156,136,0.75),
1em 0.5em rgba(150,120,20,0.75);
}
100% {
box-shadow:
1em -0.5em rgba(100,156,136,0.75),
-1em 0.5em rgba(150,120,20,0.75);
}
}
.loader::after{
animation: after 2s infinite;
}
@keyframes after{
0%{
height: 0.5em;
box-shadow:
-0.5em -1em 0.5em rgba(200,56,36,0.75),
0.5em 1em 0.5em rgba(50,60,80,0.75);
}
55% {
height: 2.5em;
box-shadow:
-0.5em 0 rgba(200,56,36,0.75),
0.5em 0 rgba(50,60,80,0.75);
}
70% {
height: 0.5em;
box-shadow:
-0.5em 1em rgba(200,56,36,0.75),
0.5em -1em rgba(50,60,80,0.75);
}
100% {
box-shadow:
-0.5em -1em rgba(200,56,36,0.75),
0.5em 1em rgba(50,60,80,0.75);
}
}
}
</style>
HTML：
<body>
<div class="loader">
</div>
</body>
