我正在尝试使用以下代码在背景中从左到右浮动对象。不幸的是,当它离开屏幕时,尽管添加了overflow-y: hidden
属性,但仍会出现垂直滚动条。我尝试了百分比(100%用于过渡)但它没有用。我不知道它应该是什么?我希望有人可以告诉我如何解决这个问题,如果只使用CSS可以修复它。
.largest-slowest {
border: solid 0px #2d2d2d;
text-align: center;
z-index: -1000;
background: #575757;
height: 50px;
width: 50px;
overflow-y:hidden;
}
.largest-slowest {
-webkit-animation: cssAnimation 12.7734s 16 linear;
-moz-animation: cssAnimation 12.7734s 16 linear;
-o-animation: cssAnimation 12.7734s 16 linear;
}
@-webkit-keyframes cssAnimation {
from {-webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(-100px);}
to { -webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(2000px); }
}
@-moz-keyframes cssAnimation {
from { -moz-transform: rotate(0deg) scale(1) skew(0deg) translate(-600px); }
to { -moz-transform: rotate(0deg) scale(1) skew(0deg) translate(2000px); }
}
@-o-keyframes cssAnimation {
from { -o-transform: rotate(0deg) scale(1) skew(0deg) translate(-600px); }
to { -o-transform: rotate(0deg) scale(1) skew(0deg) translate(2000px); }
}
答案 0 :(得分:0)
除了上述评论之外,您还需要将overflow-y: hidden
添加到.largest-slowest
的父级,而不是.largest-slowest
本身。因此,如果您不希望窗口在.largest-slowest
离开屏幕时滚动,那么您的CSS应该类似于:
body {
overflow-y: hidden;
}
.largest-slowest {
border: solid 0px #2d2d2d;
text-align: center;
z-index: -1000;
background: #575757;
height: 50px;
width: 50px;
}