1. 单弧转圈效果
<div class='container'>
<div class="circle">
<div class="loading"></div>
<div class="loading"></div>
</div>
</div>
.container{
position: fixed;
z-index: 100000;
width: 15vh;
height:15vh;
left:50%;
top:50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background: rgba(0,0,0,.6);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: #eee;
}
.circle{
// transition: all .3s ease;
position: relative;
margin:auto 0;
width: 4vh;
height: 4vh;
}
.loading{
width: 100%;
height: 100%;
border-top:2px solid #eee;
border-left:2px solid #eee;
border-radius: 100% 0 0;
animation: circles 1s cubic-bezier(1, -0.57, 0.36, 1.46) infinite;
position: absolute;
left:-50%;
top: -50%;
transform: translate(-50%,-50%);
transform-origin: 100% 100%;
}
// overflow: hidden;
@-webkit-keyframes circles {
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes circles {
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
2.手风琴波动效果
<div class='container'>
<div class="accordion">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
.container{
position: fixed;
z-index: 100000;
width: 15vh;
height:15vh;
left:50%;
top:50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background: rgba(0,0,0,.6);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: #eee;
}
.accordion {
margin: 0 auto;
width: 70px;
height: 40px;
text-align: center;
font-size: 10px;
}
.accordion div {
background-color: #eee;
height: 100%;
width: 6px;
display: inline-block;
-webkit-animation: accordion 1s infinite ease-in-out;
animation: accordion 1s infinite ease-in-out;
}
.accordion div:nth-child(2n){
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.accordion div:nth-child(3n){
-webkit-animation-delay: -1.2s;
animation-delay: -1.2s;
}
.accordion div:nth-child(4n){
-webkit-animation-delay: -1.3s;
animation-delay: -1.3s;
}
.accordion div:nth-child(5n){
-webkit-animation-delay: -1.2s;
animation-delay: -1.2s;
}
.accordion div:nth-child(6n){
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.accordion div:nth-child(7n){
-webkit-animation-delay: -1s;
animation-delay: -1s;
}
@-webkit-keyframes accordion {
0%,100% {
-webkit-transform: scaleY(0.1)
}
50% {
-webkit-transform: scaleY(1.0)
}
}
@keyframes accordion {
0%,100% {
transform: scaleY(0.1);
-webkit-transform: scaleY(0.1);
}
50% {
transform: scaleY(1.0);
-webkit-transform: scaleY(1.0);
}
}
3. 双圆放大缩小转动效果
<div class='container'>
<div class="rotate-circle">
<div class="dot1"></div>
<div class="dot2"></div>
</div>
</div>
.container{
position: fixed;
z-index: 100000;
width: 15vh;
height:15vh;
left:50%;
top:50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background: rgba(0,0,0,.6);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: #eee;
}
.rotate-circle {
margin: 0 auto;
width: 50px;
height: 50px;
position: relative;
text-align: center;
-webkit-animation: rotate-circle 2.0s infinite linear;
animation: rotate-circle 2.0s infinite linear;
}
.rotate-circle .dot1, .dot2 {
width: 60%;
height: 60%;
display: inline-block;
position: absolute;
top: 0;
background-color: #eee;
border-radius: 100%;
-webkit-animation: rotate-circle-bounce 2.0s infinite ease-in-out;
animation: rotate-circle-bounce 2.0s infinite ease-in-out;
}
.rotate-circle .dot2 {
top: auto;
bottom: 0px;
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
@-webkit-keyframes rotate-circle {
100% { -webkit-transform: rotate(360deg) }
}
@keyframes rotate-circle {
100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }
}
@-webkit-keyframes rotate-circle-bounce {
0%, 100% { -webkit-transform: scale(0.0) }
50% { -webkit-transform: scale(1.0) }
}
@keyframes rotate-circle-bounce {
0%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 50% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
4. 多圆延迟放大缩小效果
<div class='container'>
<div class="scale-circle" v-if="type == 'scale-circle'">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
<div class="bounce3"></div>
</div>
</div>
.container{
position: fixed;
z-index: 100000;
width: 15vh;
height:15vh;
left:50%;
top:50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background: rgba(0,0,0,.6);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: #eee;
}
.scale-circle div {
width: 10px;
height: 10px;
background-color: #eee;
border-radius: 100%;
display: inline-block;
-webkit-animation: scale-circle 1s infinite ease-in-out;
animation: scale-circle 1s infinite ease-in-out;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-delay: -0s;
animation-delay: -0s;
}
.scale-circle div:nth-child(2n){
-webkit-animation-delay: -.1s;
animation-delay: -.1s;
}
.scale-circle div:nth-child(3n) {
-webkit-animation-delay: -.2s;
animation-delay: -.2s;
}
.scale-circle div:nth-child(4n) {
-webkit-animation-delay: -.3s;
animation-delay: -.3s;
}
@-webkit-keyframes scale-circle {
0%, 80%, 100% { -webkit-transform: scale(0.0) }
40% { -webkit-transform: scale(1.0) }
}
@keyframes scale-circle {
0%, 80%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
}
40% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}