html构建样式结构
<body>
<div class="box">
<div class="item1"></div>
<div class="item1"></div>
<div class="item1"></div>
<div class="item1"></div>
</div>
</body>
设置父盒子box的样式
.box{
position: relative;
top: 200px;
left: 200px;
width:200px;
height: 200px;
/* border:2px solid gray; */
/* background-color: red; */
}
设子盒子item1的样式
.box .item1{
position: absolute;
width:70px;
height: 70px;
border-radius: 50%;
background-color: black;
}
.box :nth-child(1){
right:0px;
top: 0;
}
.box :nth-child(2){
bottom:0px;
}
.box :nth-child(3){
right:0px;
bottom: 0;
}
为父盒子添加动画
/* 为父盒子设置动画 */
.box{
animation: loader 2s linear infinite ;
}
@keyframes loader {
0%{
transform: rotate(0deg);
}
50%{
transform: rotate(180deg) scale(1.5);
}
100%{
transform: rotate(360deg);
}
}