为什么运行动画后，原本居中的位置却发生了偏移？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
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;}
}
</style>
</head>
<body>
<p class="box1">
<span></span>
<span></span>
</p>
</body></html>
雷雷
這個坑我碰到過，你的定位轉換別用transfrom,改成margin-left:-50%width;用了transfrom他會把初始位置定位到left:50%的地方。
雷雷
.box1 跨度{
雷雷}
雷雷@-webkit-keyframes span1{
}
雷雷@-webkit-keyframes span2{
}
原因是樓上說的，因為用了css3動畫，所上面設定偏移的時候不要用
transfrom,順手把具體的程式碼寫出來：你需要用絕對定位將要旋轉的元素的初始點定位到元素的中心，正常的初始點是在左上
用left:50%;top:50%;margin-left:-20px/元素的二分之一/;margin-top:-20px/元素的二分之一/;
這樣元素的旋轉就不會出現交錯了。