Question

        .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。我怎样才能做到这一点？谢谢！

Answer 1

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

css3动画：div的大小不正确

1 个答案: