css3动画:div的大小不正确

时间:2012-06-14 13:24:07

标签: animation css3

        .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%;  }

            }

http://jsfiddle.net/LXEXU/

我正在尝试制作一个看似旋转的滚轮,但它不起作用。车轮不是50px乘50px。我怎样才能做到这一点?谢谢!

1 个答案:

答案 0 :(得分:2)

添加位置:相对; to .wheel使其成为50px X 50px http://jsfiddle.net/LXEXU/1/