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

时间:2012-12-29 18:56:14

标签: html css css3 css-transitions

我想在没有任何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吗?

由于

2 个答案:

答案 0 :(得分:5)

  

如何将其垂直和水平放置在中央?

基本上,你会从顶部和左侧推动弹出窗口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: blocktransition转到opacity

答案 1 :(得分: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;
}