[英]CSS Translate On Normal
我正在CSS中制作一个模式弹出窗口,该弹出窗口将在单击链接后显示并向下转换(translateY)。 我的问题是弹出窗口确实出现了,但它已经处于不利地位。 我知道如何在悬停时进行翻译,但是我不知道如何在不悬停的情况下进行翻译。 谁能给我一些建议?
的HTML
<a href='#A'>Open</a>
<div id='A' class='B'>
<div class='C'>
Test</div>
</div>
的CSS
.B {
position:fixed;
top:0px;
right:0px;
bottom:0px;
left:0px;
background:rgba(0,0,0,0.8);
opacity:0;
z-index:99999;
pointer-events:none;
}
.B:target {
opacity:1;
pointer-events:auto;
}
.B > .C {
width:100px;
height:100px;
background:#FFF;
background:-moz-linear-gradient(#FFF, #999);
background:-webkit-linear-gradient(#FFF, #999);
background:-o-linear-gradient(#FFF, #999);
-webkit-border-radius:15px;
-moz-border-radius:15px;
-ms-border-radius:15px;
-o-border-radius:15px;
border-radius:15px;
position:relative;
}
.C {
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-ms-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
-webkit-transform: translate(0px, 50px);
-moz-transform: translate(0px, 50px);
-o-transform: translate(0px, 50px);
-ms-transform: translate(0px, 50px);
transform: translate(0px, 50px);
}
JSFiddle http://jsfiddle.net/M5tcL/16/
CSS过渡使属性值的更改对查看者而言显得平滑(补间?)。
您永远不会在此处更改css属性的值,因此无需进行动画处理。
必须有两个具有不同值的css状态。 您需要使用javascript或复选框才能使其正常工作。
例如,您可以使用javascript切换body元素上的类,或使用带有关联标签的复选框 。
那你可以用
/* Normal state */
.C{
opacity: 0;
transition: all .3s;
}
/* Open state */
:checked ~ .C,
/* OR */
body.open .C{
opacity: 1;
}
在此片段示例中,不透明度将在0到1之间变化时显示动画。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.