3

我想在没有任何 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，并在hover兄弟 DOM 元素上将其转换为1.
如何将它定位在中心，垂直和水平？
另外，这是制作 CSS3 弹出窗口的正确方法吗？
我可以从 过渡display: none到display: block吗？

谢谢

4

2 回答 2

5

如何将它定位在中心，垂直和水平？

本质上，您会将弹出窗口从顶部和左侧推 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使用transitionon opacity。

于 2012-12-29T19:02:49.753 回答
0

现在可以使用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;
}
于 2019-08-29T16:28:27.863 回答