<分区>
<分区>
我正在使用 CSS3 制作一个包含动画元素的网站。我遇到的一个问题是垂直滚动条。于是就有了一个不断从左向右再向后滑动的元素:
@keyframes waves {
0% {left:-50px;}
50% {left: 0px;}
100% {left: -50px;}
}
为了使它起作用，对象大于屏幕尺寸。现在当然会出现垂直滚动条。我该如何隐藏它？
我将元素放在一个容器中，我在容器中定义了 overflow-x: hidden 但不知何故它不起作用。也许我只是做错了？我应该使用什么方法？
这是 fiddle : https://jsfiddle.net/hsdoy3t4/
非常感谢您的帮助。
最佳答案
因为它采用了 body 标签的默认边距。
为 body 标签设置 margin:0。
body{
margin:0;
}
#home {
width: 100vw;
overflow-x: hidden;
}
#object {
background-image: url('http://www.1000skies.com/800trim.jpg');
width: calc(100% + 50px);
height: 158px;
position: relative;
-webkit-animation: waves 2s infinite;
-moz-animation: waves 2s infinite;
animation: waves 2s infinite;
}
@-webkit-keyframes waves {
0% {left:-50px;}
50% {left: 0px;}
100% {left: -50px;}
}
@-moz-keyframes waves {
0% {left:-50px;}
50% {left: 0px;}
100% {left: -50px;}
}
@keyframes waves {
0% {left:-50px;}
50% {left: 0px;}
100% {left: -50px;}
}<section id="home">
<div id="object"></div>
</section>关于html - 溢出-X : hidden doesn't work with animation，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40040818/