Html css3滑升传输

嗨，我有一个Div，我不想在点击链接时公开，它会在页面底部弹出一个窗口。。。目前看起来是这样的：

body{margin:0；}
#灯箱{
显示：无；
位置：绝对位置；
底部：5px；
z指数：1000；
宽度：100%；
背景色：#09F；
高度：50px；
浮动：左；
字体系列：“helvetica_bqregular”；
字体大小：20px；
线高：65px；
颜色：#FFF；
文本对齐：居中；
}
/*与IE8+、Firefox 2+、Safari、Chrome、Opera 10+配合使用*/
#灯箱：目标{
显示：块；
}
消费者
生意

但我想让盒子从底部向上滑动，如下所示：

有人能帮助你取得成就吗？似乎在审判中失败了

---

谢谢

删除html中内联样式的高度，并在css中将框的初始高度设置为0px，然后使用css转换将其设置为全高

html

---

CSS与HTML是分开的吗？好吧，如果你不像原来那样使用CSS

转换属性，那么显然它不会工作。。。如果您尝试过，请向我们展示您所做的，并解释它是如何失败的。关闭我希望它作为一个完整的框向上滑动，而且我似乎无法使底部的灰色div消失。管理它谢谢我按照您的思路，稍后将上传到JSFIDLE以显示我所做的：）再次感谢您
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>

<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>

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;
}