5

私は単純な div を設定していますが、どうすれば「ポップアウト」効果を持たせることができるのか疑問に思っていました。たとえば、小さな長方形として開始し、少し大きな長方形にアニメーション化して、飛び出しているような錯覚を起こさせたいと思います。

HTML

<div id="submit-logged-out">
    You must be <a href="/wp-login.php?action=register">registered</a> to submit.
</div>

CSS

#submit-logged-out {
background: #000;
color: #fff;
font-size: 2em;
left: 112px;
padding: 40px;
position: absolute;
top: 200px;
}

JSFiddle: http://jsfiddle.net/SSsVx/

4

1 に答える 1

14

これは、プレーンな CSS で行うのが最適です。

.popout {
    animation: popout 1s ease;
    -webkit-animation: popout 1s ease;
}
@keyframes popout {
    from{transform:scale(0)}
    80%{transform:scale(1.2)}
    to{transform:scale(1)}
}
@-webkit-keyframes popout {
    from{-webkit-transform:scale(0)}
    80%{-webkit-transform:scale(1.2)}
    to{-webkit-transform:scale(1)}
}

.popout次に、クラスをボックスに追加します。

更新されたフィドル

于 2013-01-26T23:01:59.173 に答える