创建一个仅限CSS的Popup,具有淡入淡出效果

Question

我想创建一个基于CSS的弹出窗口(CSS3允许),没有任何JavaScript,具有淡入淡出过渡和缩放效果.类似于IceCream Sandwitch和JellyBean弹出消息的东西.

我尝试了以下内容:http:
//jsfiddle.net/OMS_/7UaK4/5/

代码的主要部分:

HTML

<span class="info"> Info </span>
<div class="message">
    <p>
        Content
    </p>
</div>?  

CSS

.message {
    position: absolute;
    top: 100px;
    left: 0;
    width: 100%;
    text-align: center;
    opacity: 0;
    -webkit-transform: scale(.9, .9);
    -webkit-transition: all .18s ease-in-out;
}
.info:hover + .message {
    opacity: 1;
    -webkit-transform: scale(1, 1);
}

什么我做的是设置opacity的元素来0,和hover兄弟姐妹的DOM元素,跃迁它的1.
如何将其垂直和水平放置在中心？
另外,这是制作CSS3弹出窗口的正确方法吗？
我可以过渡display: none到display: block吗？

谢谢

Answer 1

如何将其垂直和水平放置在中心？

从本质上讲,你会从顶部和左侧推动弹出窗口50%.但是,您必须稍微后退,因为您必须考虑弹出窗口的宽度和高度.

.center-of-screen {
    position: absolute;
    top: 50%;     margin-top:  /* -(height/2) */;
    left: 50%;    margin-left: /* -(width/2) */;
}

来源: 如何将物体准确地居中在中心？

注意: -(height/2)并且-(width/2)是元素宽度和高度的一半的负值.例如,如果您的元素是300px x 200px代码是:

.center-of-screen {
    position: absolute;
    top: 50%;     margin-top:  -100px;
    left: 50%;    margin-left: -150px;
}

另外,这是制作CSS3弹出窗口的正确方法吗？

是的,如果你在谈论悬停弹出窗口.

我可以从display:none转换为display:block吗？

不,你会从去display: none到display: block与transition只opacity.