1

ここで以前に同様のことが尋ねられたことを知っています。

しかし、それが含まれているので、それは少し異なりますcss transitions。

http://jsfiddle.net/fariskassim/rWNJN/4/

.panel{

width:inherit;
height: 0%;
display:block;
position: absolute;

background: #000;
opacity:0;
z-index: 2;

margin-top: 40px;
margin-right: 40px;
margin-left: 40px;
margin-bottom: 40px;

bottom:0;
top:0;
left:0;
right:0;

-webkit-transition: all .8s ease-in-out;
-moz-transition: all .8s ease-in-out;
-o-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;

}

箱を開けると、

私は緑色のボックスを40pxブラウザの境界からすべての側面に配置しようとしています。左/右と上でそれを行うことができましたが、下が問題です。

どうすればこれを修正できますか？

編集:同時に、ボックスを開閉するときに、ワイプインとワイプアウトの効果が必要です。

http://jsfiddle.net/fariskassim/rWNJN/4/

4

2 に答える 2

0

それはあなたが で与えheight:100%たからです.panel:target。それを削除すると、それは問題ありません。

.panel:target{

    background-color: rgba(226, 229, 16, 0.8);
    opacity:100;

    width:inherit;
    display:block;

    margin-top: 40px;
    margin-right: 40px;
    margin-left: 40px;

    bottom:0;
    top:0;
    left:0;
    right:0;
}

デモ

于 2013-03-21T06:51:39.550 に答える