我知道在这里已经有人问过类似的问题。
但是它涉及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
,我已经设法在左/右和顶部做到了,但是底部是个问题。
任何想法我该如何解决?
编辑:同时,我仍然希望在打开和关闭盒子时具有擦入和擦出的效果。
这是因为您在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;
}
任何您想要的 +响应高度
.panel:target{
background-color: rgba(226, 229, 16, 0.8);
opacity:100;
height: auto;
width:inherit;
display:block;
margin-top: 40px;
margin-right: 40px;
margin-left: 40px;
margin-bottom:40px;
bottom:0;
top:0;
left:0;
right:0;
}