<div class="box">
<div class="cube1"></div>
<div class="cube2"></div>
</div>
---------
.box {
width: 100px;
height: 100px;
position: relative;
margin: 100px auto;
animation:rotate 2s infinite linear;
}
@keyframes rotate {
100% {
transform:rotate(360deg);
}
}
.cube1, .cube2 {
width: 60%;
height: 60%;
position: absolute;
top: 0;
background: #0ff;
border-radius: 50%;
animation:load 2s infinite ease-in-out;
}
.cube2 {
top: auto;
bottom: 0;
animation-delay: -1s;
}
@keyframes load {
0%, 100% {
transform: scale(0);
}
50% {
transform: scale(1);
}
}
为什么下面这个top和buttom要这么设置,去掉的话就一个圈在转
.cube2 {
top: auto;
bottom: 0;
animation-delay: -1s;
}