3

非表示になり、画面に表示できるように、負のマージンで配置されたdivがあります。ただし、右にスクロールして表示することはできます。bodyタグとhtmlタグのプロパティをhiddenに変更しようとしましたがoverflow-x、機能しませんでした。私は何が間違っているのですか？

私のdivはで配置されmargin-right:-800px、何も機能していないようです！

編集されたコード

CSSコード：

隠しdiv：

.card{
    z-index:21;
    position:absolute;
    right:-800px;
    background:white;
    border:1px solid black;
    margin:auto;
    text-align:left;
    padding:20px;
    visibility:hidden;
    -webkit-box-shadow: 5px 5px 5px rgba(110,110,110,.7);
    -webkit-transform:rotate(-100deg);
    -webkit-transition:right .5s, -webkit-transform .5s;
}

私のオーバーフローの試み：

html {
    overflow-x:hidden;
    overflow-y:visible;
}
4

1 に答える 1

2

@Pranav が述べたように、アニメーションをどのように作成しているかはわかりません。ただし、ここにあなたが説明しているものに似たアニメーションの実例があります: http://jsfiddle.net/Ktt4Z/2/。

JavaScript

$('#box').animate({  textIndent: 0 }, {
    step: function(now,fx) {
      $(this).css('-webkit-transform','rotate('+now+'deg)'); 
    },
    duration:'slow'
},'linear');​

HTML

<div class="card">
    This is a test. This is a test.
</div>​

また、CSS に関する優れたリソースもありますoverflow: http://www.brunildo.org/test/Overflowxy2.html

最後に、質問を投稿するときは、コード、可能であれば JSFiddle を使用した簡単な例、および試したことを投稿することをお勧めします。これは、コミュニティが質問に対する回答を調査および発見するのに役立ちます。

編集 0

試す：

display: none;

それ以外の：

visibility:hidden;

また、インターウェブには と の違いに関する役立つ記事がいくつかありvisibilityますdisplay。たとえば、この記事には次のように記載されています。

表面的な表示では、どれも同じように見えないかもしれませんが、可視性は隠されていますが、そうではありません。大きな違いは、先ほど申し上げた点です。

visibility: hidden– 要素は通常のドキュメント フローにとどまります

display: none– 要素が通常のドキュメント フローから削除されるため、周囲の html 要素が折りたたまれてスペースが閉じられます

于 2012-12-15T19:31:41.250 に答える