预览图
技术标签
- css3 伪类选择器（nth-of-type）
- css3 animation
代码：
<style>
body {
background: #293a49;
}
.loading-dot {
width: 200px;
height: 200px;
padding: 40px;
position: relative;
text-align: center;
background: transparent;
animation: loadingContainer 2.5s linear infinite both;
}
.loading-dot div {
position: absolute;
width: calc(100% - 80px);
height: calc(100% - 80px);
background-color: transparent;
animation: loadingDot 2s ease-in-out infinite both;
}
.loading-dot div:nth-of-type(1)::after,
.loading-dot div:nth-of-type(2)::after,
.loading-dot div:nth-of-type(3)::after,
.loading-dot div:nth-of-type(4)::after,
.loading-dot div:nth-of-type(5)::after,
.loading-dot div:nth-of-type(6)::after {
content: '';
border-radius: 50%;
display: inline-block;
background: #fff;
}
.loading-dot div:nth-of-type(1) {
animation-delay: -1.1s;
}
.loading-dot div:nth-of-type(2) {
animation-delay: -1s;
}
.loading-dot div:nth-of-type(3) {
animation-delay: -0.9s;
}
.loading-dot div:nth-of-type(4) {
animation-delay: -0.8s;
}
.loading-dot div:nth-of-type(5) {
animation-delay: -0.7s;
}
.loading-dot div:nth-of-type(6) {
animation-delay: -0.6s;
}
.loading-dot div:nth-of-type(1)::after {
width: 20px;
height: 20px;
}
.loading-dot div:nth-of-type(2)::after {
width: 18px;
height: 18px;
}
.loading-dot div:nth-of-type(3)::after {
width: 16px;
height: 16px;
}
.loading-dot div:nth-of-type(4)::after {
width: 14px;
height: 14px;
}
.loading-dot div:nth-of-type(5)::after {
width: 12px;
height: 12px;
}
.loading-dot div:nth-of-type(6)::after {
width: 10px;
height: 10px;
}
@keyframes loadingContainer {
100% { transform: rotate(360deg) }
}
@keyframes loadingDot {
80%, 100% { transform: rotate(360deg) }
}
</style>
<template>
<div class="loading-dot">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</template>
完整请移步 tobiasahlin.com/spinkit/
