Question

我想在没有任何JavaScript的情况下创建基于CSS的弹出窗口（CSS3允许），具有淡入淡出过渡和缩放效果。类似于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，并在兄弟DOM元素的hover上将其转换为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) */;
}

来源： How to center an object exactly in the center?

注意： -(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。

Answer 2

现在可以通过使用visibility来实现：

.message {
    visibility: hidden;
    opacity: 0;

    transform: scale(.9);

    transition: transform .18s, opacity .18s, visibility 0s .18s; // delay visibility
}

.info:hover + .message {
    visibility: visible;
    opacity: 1;

    transform: scale(1);

    transition-delay: 0s;
}

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

2 个答案: