Html 影响页面宽度的CSS动画

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

我曾尝试将图像更改为raysdiv中的背景图像，但后来我完全失去了效果

请参见下面的缩小示例

#光线容器{
宽度：100%；
最大宽度：490px；
位置：绝对位置；
左：0；
右：0；
保证金：自动；
z指数：0；
}
#射线{
宽度：100%；
身高：100%；
}
@-webkit为光线设置关键帧{
从{
-webkit变换：旋转（0度）；
}
到{
-webkit变换：旋转（360度）；
}
}
@-ms为光线设置关键帧{
从{
-ms变换：旋转（0度）；
}
到{
-ms变换：旋转（360度）；
}
}
.旋转{
-webkit变换原点：中心；
-webkit动画：光线60秒无限线性；
-ms动画：光线60秒无限线性；
-ms变换原点：中心；
}

---

您看到的滚动条是因为其中的内容大于其宽度（这是显而易见的部分）。也就是说，修复它的一种方法是添加

overflow-x:hiddenclass=“spin”

将code>添加到元素父级的CSS，在本例中，它是

溢出是CSS属性，它定义了如果内容不合适会发生什么。值

hidden

告诉它只需剪辑内容，而不显示任何滚动条

---

有关更多信息，请参见。

您看到的滚动条是因为其中的内容大于其宽度（这是显而易见的部分）。也就是说，修复它的一种方法是添加

overflow-x:hiddenclass=“spin”

将code>添加到元素父级的CSS，在本例中，它是

溢出是CSS属性，它定义了如果内容不合适会发生什么。值

hidden

告诉它只需剪辑内容，而不显示任何滚动条

---

有关更多信息，请参见。

尝试向

#rays

类添加

填充

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

尝试向
#rays
类添加
填充
，如下所示

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

溢出：隐藏在容器上。。。。但是您需要使容器具有静态宽度。Atm将更改为内容。如果您将#射线更改为类“spin”而不是容器，它将正常工作。使用overflow Hiddennen不知道为什么要对图像使用宽度和高度，对父div使用位置：绝对，对包含图像的div使用宽度和高度：100%。删除这些内容并向父div添加
overflow hidden
将使它变得更好。@dragonvsphoenix可以工作，但当页面足够大，可以显示整个内容时，它会切断图像。@Julsy图像具有高度和宽度，因此旋转时轴保持在中心。父div具有绝对位置，因为它位于页面上其他元素的后面。溢出：隐藏在容器上。。。。但是您需要使容器具有静态宽度。Atm将更改为内容。如果您将#射线更改为类“spin”而不是容器，它将正常工作。使用overflow Hiddennen不知道为什么要对图像使用宽度和高度，对父div使用位置：绝对，对包含图像的div使用宽度和高度：100%。删除这些内容并向父div添加
overflow hidden
将使它变得更好。@dragonvsphoenix可以工作，但当页面足够大，可以显示整个内容时，它会切断图像。@Julsy图像具有高度和宽度，因此旋转时轴保持在中心。父div有一个绝对位置，因为它位于页面上其他元素的后面。哇，看起来这很有效。我没有把它放在身体上，而是把它放在#rays容器外的父容器上。谢谢大家的帮助。哇，看起来这很有效。我没有把它放在身体上，而是把它放在#rays容器外的父容器上。谢谢大家的帮助。