Animation css3动画:div大小不正确
Animation css3动画:div大小不正确,animation,css,Animation,Css,我试着做一个看起来旋转的轮子,但它不工作。轮子不是50px乘50px的。我怎样才能做到这一点?谢谢 添加位置:相对位置;到。轮子使其成为50px 50px .wheel { width: 50px !important; height: 50px !important; } .wheel1 { width: 100%;
我试着做一个看起来旋转的轮子,但它不工作。轮子不是50px乘50px的。我怎样才能做到这一点?谢谢 添加位置:相对位置;到。轮子使其成为50px 50px
.wheel {
width: 50px !important;
height: 50px !important;
}
.wheel1 {
width: 100%;
height: 100%;
background-color: #3D3D3D;
border-radius: 50% / 50%;
position: absolute;
}
.wheel2 {
width: 80%;
height: 80%;
background-color: #B8B8B8;
margin: 10%;
border-radius: 50% / 50%;
position: absolute;
-webkit-animation: wheelActive 1s;
-webkit-animation-iteration-count: infinite;
-moz-animation: wheelActive 1s;
-moz-animation-iteration-count: infinite;
-ms-animation: wheelActive 1s;
-ms-animation-iteration-count: infinite;
-o-animation: wheelActive 1s;
-o-animation-iteration-count: infinite;
animation: wheelActive 1s;
animation-iteration-count: infinite;
}
@-webkit-keyframes wheelActive
{
0% { margin: 5%; height: 90%; width: 90%; }
50% { margin: 0%; height: 100%; width: 100%; }
100% { margin: 5%; height: 90%; width: 90%; }
}
@-moz-keyframes wheelActive
{
0% { margin: 5%; height: 90%; width: 90%; }
50% { margin: 0%; height: 100%; width: 100%; }
100% { margin: 5%; height: 90%; width: 90%; }
}
@-ms-keyframes wheelActive
{
0% { margin: 5%; height: 90%; width: 90%; }
50% { margin: 0%; height: 100%; width: 100%; }
100% { margin: 5%; height: 90%; width: 90%; }
}
@-o-keyframes wheelActive
{
0% { margin: 5%; height: 90%; width: 90%; }
50% { margin: 0%; height: 100%; width: 100%; }
100% { margin: 5%; height: 90%; width: 90%; }
}
@keyframes wheelActive
{
0% { margin: 5%; height: 90%; width: 90%; }
50% { margin: 0%; height: 100%; width: 100%; }
100% { margin: 5%; height: 90%; width: 90%; }
}