用来指定元素的中心点位置
top = top center = center top 50% 0
right = right center = center right 100%(或100% 50%）
bottom = bottom center = center bottom 50% 100%
left = left center = center left 0% (或0% 50%）
center = center center 50% (或50% 50%）
top left = left top 0% 0%
top right = right top 100% 0
bottom left = left bottom 0% 100%
bottom right = right bottom 100% 100%
.outer{
width: 100px;
height: 100px;
background-color: #6a5acd;
margin:200px;
}
.inner{
width: 100%;
height: 100%;
background-color: #6acdeb;
transform: rotate(10deg);
transform-origin: 0 0;/*以左上角旋转*/
}
【扩展练习：加载条】
<div class="outer">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
html,body{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin:0 auto;
height: 100%;
width: 100%;
}
.outer{
display: flex;
justify-content: center;
width: 100px;
height: 100px;
/*background-color: #6a5acd;*/
position: relative;
}
.inner{
position:absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: black;
transform-origin: 50% 50px;
animation: an-circle 3s ease-in-out infinite;
}
.inner:nth-child(2){
height: 18px;
width: 18px;
animation-delay: .2s;/*等待2秒后动画*/
}
.inner:nth-child(3){
height: 16px;
width: 16px;
animation-delay: .4s;
}
.inner:nth-child(4){
height: 14px;
width: 14px;
animation-delay: .6s;
}
@keyframes an-circle{
to{
transform: rotate(1turn);
}
}
网友评论