Question

嗨我有一个Div我不会在Click of a link上显示它，它会在页面底部显示一个弹出窗口......此时它看起来像这样： http://jsfiddle.net/XPJC5/

body{margin:0;}
#lightbox {
        display:none;
        position:absolute;
        bottom:5px;
        z-index:1000;
        width:100%;
        background-color:#09F;
        height:50px;
        float:left;
        font-family: 'helvetica_bqregular';
        font-size:20px;
        line-height:65px;
        color:#FFF;
        text-align:center;
            }

 /* works with IE8+, Firefox 2+, Safari, Chrome, Opera 10+ */

 #lightbox:target {
         display:block;
      }

<a href="#lightbox" style="color:#999; text-decoration:underline;">Register</a>
<div id="lightbox">

          <div style=" background-color:#CBE376; width:100%; line-height:65px; height:65px; border-bottom:solid #999 thin; -webkit-box-shadow:  4px 4px 4px 4px #333;box-shadow:  4px 4px 4px 4px #333; clear:both;">
Consumer
          </div>
          <div style=" background-color:#94C8F1; line-height:65px; width:100%; height:65px;">

             Business</div>
    <div style=" background-color:#333; width:100%; height:65px;"><a href="#" style="color:#fff; text-decoration:none;">Close</a>

          </div></div>

但是我希望盒子从底部向上滑动，类似于： http://jsfiddle.net/R8zca/4/

任何人都可以帮助完成成就吗？似乎在审判中失败了。

由于

Answer 1

从html中的内联样式中删除高度，并在css中将框设置为初始高度0px，然后使用css过渡将它们带到全高

html

<a href="#lightbox" style="color:#999; text-decoration:underline;">Register</a>
<div id="lightbox">

          <div style=" background-color:#CBE376; width:100%; line-height:65px; border-bottom:solid #999 thin; -webkit-box-shadow:  4px 4px 4px 4px #333;box-shadow:  4px 4px 4px 4px #333; clear:both;">
Consumer
          </div>
          <div style=" background-color:#94C8F1; line-height:65px; width:100%; ">

             Business</div>
    <div style=" background-color:#333; width:100%;"><a href="#" style="color:#fff; text-decoration:none;">Close</a>

          </div></div>

CSS

body{margin:0;}
#lightbox div
{
    height: 0px;
}
#lightbox {
        display:block;
        position:absolute;
        bottom:5px;
        z-index:1000;
        width:100%;
        background-color:#09F;
        float:left;
        font-family: 'helvetica_bqregular';
        font-size:20px;
        line-height:65px;
        color:#FFF;
        text-align:center;
            }

 /* works with IE8+, Firefox 2+, Safari, Chrome, Opera 10+ */

#lightbox:target div
{
    height: 65px;
    -webkit-transition:all 1s ease;
    -moz-transition:all 1s ease;
}

http://jsfiddle.net/axrwkr/XPJC5/2

css3向上滑动过渡

1 个答案: