为什么运行动画后,原本居中的位置却发生了偏移?
*{
padding: 0px;
margin: 0px;
}
.box1{
width: 600px;
height: 200px;
background: orange;
position: relative;
}
.box1 span{
position: absolute;
border: 8px solid #fff;
border-top: 8px solid transparent;
border-radius: 999px;
top: 50%;left: 50%;
transform: translate(-50%,-50%);
}
.box1 span:nth-child(1){
width: 80px;
height: 80px;
/*animation: span1 2s linear infinite ;*/
}
.box1 span:nth-child(2){
width: 40px;
height: 40px;
/*animation: span2 1s linear infinite ;*/
}
@-webkit-keyframes span1{
0%{transform: rotate(360deg); opacity: 1;}
50%{transform: rotate(180deg); opacity: .5;}
100%{transform: rotate(0deg); opacity: 0;}
}
@-webkit-keyframes span2{
0%{transform: rotate(0deg); opacity: .5;}
50%{transform: rotate(180deg); opacity: 1;}
100%{transform: rotate(360deg); opacity: .5;}
}


本文探讨了在CSS动画中,一个原本居中的元素在执行旋转动画后出现位置偏移的现象。通过分析代码,我们可以看到使用了`transform: translate(-50%, -50%)`来实现居中,但在动画过程中,元素的边框变化导致了中心点改变,从而引起偏移。文章深入分析了这个问题,并提出了解决方案。
617

被折叠的 条评论
为什么被折叠?



