Question

我使用CSS动画变换在我的页面上旋转图像。问题是，当我减小页面宽度时，我得到一个不断变化大小的水平滚动条。如何保持旋转图像，但是当它开始在页面宽度之外扩展时，父容器会从侧面切掉？

我已尝试将图像更改为光线 div中的背景图像，但之后我完全失去了效果。

请参阅以下缩小的示例。

＆＃13;

#rays-container {
  width: 100%;
  max-width: 490px;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 0;
}
#rays {
  width: 100%;
  height: 100%;
}
@-webkit-keyframes rays {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}

@-ms-keyframes rays {
    from {
        -ms-transform: rotate(0deg);
    }
    to {
        -ms-transform: rotate(360deg);
    }
}
.spin {
    -webkit-transform-origin: center center;
    -webkit-animation: rays 60s infinite linear;
    -ms-animation: rays 60s infinite linear;
    -ms-transform-origin: center center;
}

＆＃13;

<div id="rays-container" class="spin">
  <div id="rays">
    <img src="https://s-media-cache-ak0.pinimg.com/736x/af/97/ee/af97eef70a8bce541b19c6a41178a015.jpg" style="width: 100%; height: 100%;">
  </div>
</div>

＆＃13;

CodePen

Answer 1

你看到的滚动条是因为它里面的内容大于它的宽度（这是显而易见的部分）。话虽这么说，修复它的一种方法是使用overflow-x: hidden;将class="spin"添加到元素父级的CSS中，在这种情况下为<body>。

body {
    overflow-x: hidden;
}

溢出是CSS属性，它定义了内容不适合时会发生什么。值hidden告诉它只是剪辑内容，而不是显示任何滚动条。

有关详细信息，请参阅MDN page on CSS overflow。

Answer 2

尝试将padding添加到#rays类，就像这样。

#rays {
    padding: 100px;
    /* as suggested by Matheus Avellar */
    overflow: hidden;
    /* width: 100%; */
    /* height: 100%; */
}

Code Pen

影响页面宽度的CSS动画

2 个答案: