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: nonedisplay: 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) and-(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 に移行できますか?

いいえ。 on のみでfrom display: nonetodisplay: blockに移動します。transitionopacity

于 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 に答える