CSS
<style>
.loading {
width: 300px;
height: 300px;
position: relative;
border: 1px solid gray;
}
.loading .line {
width: 200px;
height: 8px;
/* margin: 50% 20px; */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(11, 232, 129,.8);
border-radius: 4px;
}
.loading span {
display: inline-block;
height: 18px;
width: 18px;
border-radius: 50%;
position: absolute;
top: -50%;
left: 0;
background: rgba(11, 232, 129,1);
animation: moving 1.1s infinite linear alternate;
}
@keyframes moving{
from {
left: 0;
}
to {
left: 185px;
}
}
</style>
HTML
<div class="loading">
<div class="line">
<span></span>
</div>
</div>
注意,为了展示效果,loading设置了margin,在实际项目中需要自己调整。
效果
CSS
<style>
.loading {
width: 300px;
height: 300px;
border: 1px solid black;
}
.loading .spinner {
display: inline-block;
width: 100px;
height: 100px;
background: #81ecec;
margin: 100px 100px;
perspective: 120px;
/* transition: background .2s; */
animation: plan 1.8s infinite ease-in-out;
}
@keyframes plan {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
background: #55efc4;
}
50% {
transform: rotateY(0deg) rotateX(-180.1deg);
background: #74b9ff;
}
100% {
transform: rotateY(-179.9deg) rotateX(-180deg);
background: #00cec9;
}
}
</style>
HTML
<div class="loading">
<span class="spinner"></span>
</div>
注意,为了展示效果,loading设置了margin,在实际项目中需要自己
效果
截图不能截动态的效果,动态效果是:正方形在平面内翻转。