Question

我有一个滑过页面的div。我正在玩CSS中的关键帧，试图了解它能做些什么。

我希望这个div能够作为一个窗帘，所以当它滑动时，它背后的一切都会改变。否则，当div超出用户可以看到的范围时，浏览器允许用户滚动查看所有内容。如何阻止用户看到该ONE元素的溢出？这是一个小提琴。

代码：

<div class="content"></div>
<div class="hide"><div class="curtain"></div></div>

CSS：

body {
    }
    .hide {overflow: hidden;}
    .curtain {
        -webkit-animation:curtainMove 5s; /* Safari and Chrome */
        -webkit-animation-fill-mode: forwards;
        margin-left: -2100px;
        margin-top: -300px;
        background-color: black;
        height: 2000px;
        width: 4000px;
        transform:rotate(50deg);
        -ms-transform:rotate(50deg); /* IE 9 */
        -webkit-transform:rotate(140deg); /* Safari and Chrome */
        z-index: 13;
        float: left;
        position:absolute;
    }
    @-webkit-keyframes curtainMove /* Safari and Chrome */{
    from {
        margin-left: -2500px;
        margin-top: -2500px;
    }
    to {
        margin-left: 600px;
        margin-top: 600px;
    }
}
    .content {
    background-color: #9F3;
    height: 1200px;
    width: 740px;
    margin-top: 75px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: 75px;
    position:absolute;
    z-index: 12;
    }

Answer 1

这是一个解决方案：http://jsfiddle.net/Lvtr6/3/

<div class="hide">
    <div class="curtain"></div>
    <div class="content"></div>
</div>

.hide {
    overflow: hidden;
    position: relative;
}

然后移除position: absolute;上的.content以填充父级。如果有必要的解决方案，您可以考虑将div类.hide重命名为.outer。

如何设置溢出：隐藏;一个元素

1 个答案: