我试图让一个 div 使用 CSS3 围绕另一个旋转,但由于某种原因它根本不会动画。我正在使用 Chrome。任何人都可以帮忙吗?
这是CSS
.container {
margin: 0 auto;
position: relative;
}
#center {
width: 300px;
height: 300px;
margin: 225px auto 0;
border: 5px solid #ddd;
border-radius: 100%;
background: #aaa;
}
@-webkit-keyframes rot {
from {
transform: rotate(0deg)
translate(-150px)
rotate(0deg);
}
to {
transform: rotate(360deg)
translate(-150px)
rotate(-360deg);
}
}
@keyframes rot {
from {
transform: rotate(0deg)
translate(-150px)
rotate(0deg);
}
to {
transform: rotate(360deg)
translate(-150px)
rotate(-360deg);
}
}
#small {
position: absolute;
width: 75px;
height: 75px;
border: 5px solid #ddd;
border-radius: 100%;
background: #aaa;
animation: rot 3s infinite linear;
-webkit-animation: rot 3s linear infinite;
}
这是html
<div class="container">
<div id="center"></div>
<div id="small"></div>
</div>