2

このページのような zoomIn 効果を作成しようとしています:サンプル Web サイト

ページの読み込み時に上部の「mk」ロゴが拡大されます。

私はコードをコピーしようとしましたが、これは私がこれまでに持っているものですが、機能していません:

html:

<div id="header">
    <div id="toplogo"><h1><a href="http://www.pz.com">PagesByZ:: Think Outside the Box</a></h1></div>
</div>

CSS:

#header {
    width: 800px;
    height: 80px;
    animation: 0.4s ease-in-out 0s normal forwards 1 zoomIn;
}
#toplogo h1 { 
    margin: 0; 
    padding: 0; 
}
#toplogo h1 a { 
    display: block; 
    width: 212px; 
    height: 80px; 
    margin: 20px 0 0; 
    background: url('http://www.interfaithmedical.com/pz/theImages/hdrLogo.png') no-repeat; 
    color: #fff; 
    font-size: 40px; 
    font-weight: 400; 
    outline: none; 
    text-indent: -10000px; 
}

JDFiddle の例: http://jsfiddle.net/n75rL/

ページが読み込まれるたびに、ロゴでその効果を達成しようとしています。

4

1 に答える 1

1

「ズームアウト」という意味だと思います。

実際のアニメーション リストの定義がありません。

@keyframes zoomIn{
  0% {
    opacity: 0;
    transform: scale(10);
  }
  100% {              /* <- not really required if these are the defaults */
    opacity: 1;
    transform: scale(1);
  }

また、間違った省略形のプロパティ形式を使用しているようです (こちらの構文セクションを参照してください)。

(これは更新されたJSFiddle です)

于 2013-06-21T15:02:31.357 に答える