Question

我正在尝试在页面上旋转两个png环。一切正常，除了Firefox滚动条出现并上下移动。我认为这是因为方形png旋转并撞击边缘。

有什么想法吗？下面的CSS：

@-webkit-keyframes rings {
    from {
        -webkit-transform: rotate(0deg);
    }
    to  { 
        -webkit-transform: rotate(359deg);
    }
}
@-moz-keyframes rings {
    from {
        -moz-transform: rotate(0deg);
    }
    to  { 
        -moz-transform: rotate(359deg);
    }
}
@-o-keyframes rings {
    from {
        -o-transform: rotate(0deg);
    }
    to  { 
        -o-transform: rotate(359deg);
    }
}
@keyframes rings {
    from {
        transform: rotate(0deg);
    }
    to  { 
        transform: rotate(359deg);
    }
}

.rotating-rings {
    position: absolute;
    z-index: -5;
    width: 90%;
    height: 90%;
    overflow: none;
}

#ring-1 {
    overflow: hidden;
    position: absolute;
    width: 90%;
    -webkit-animation-name: rings;
    -webkit-animation-duration: 9s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-transition-timing-function: linear;
    -moz-animation-name: rings;
    -moz-animation-duration: 9s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-transition-timing-function: linear;
    -o-animation-name: rings;
    -o-animation-duration: 9s;
    -o-animation-iteration-count: infinite;
    -o-animation-direction: normal;
    -o-transition-timing-function: linear;
    animation-name: rings;
    animation-duration: 9s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    transition-timing-function: linear;
}

#ring-2 {
    overflow: hidden;
    position: absolute;
    width: 90%;
    -webkit-animation-name: rings;
    -webkit-animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: reverse;
    -webkit-transition-timing-function: linear;
    -moz-animation-name: rings;
    -moz-animation-duration: 10s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: reverse;
    -moz-transition-timing-function: linear;
    -o-animation-name: rings;
    -o-animation-duration: 10s;
    -o-animation-iteration-count: infinite;
    -o-animation-direction: reverse;
    -o-transition-timing-function: linear;
    animation-name: rings;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-direction: reverse;
    transition-timing-function: linear;
}

Answer 1

尝试将overflow:hidden应用于图片的父元素

png旋转时隐藏滚动条

1 个答案: