0

最初の問題: 私はこれを正しくしようとしていますが、何も機能していません。ページがロードされるのと同じように、画像を拡大縮小してフェードダウンさせ、そこに座らせたい. 画像もリンクです。

アニメーションなしで動作するこれまでのコードは

html---

<a href="index.html"> 
    <img src="images/insandoutslogo.jpg" alt="" class="insandoutslogoimg" /> 
    <p1> Ins and Outs </p1>
</a>

css---

.insandoutslogoimg
{
    width: 210px;
    height: 210px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -112.5px;
    margin-left: -112.5px;
}

ありがとうございます！

4

1 に答える 1

1

質問がわかりにくいです。しかし、おそらくあなたはこのようなものを見ています：

.insandoutslogoimg {
  width: 210px;
  height: 210px;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -112.5px;
  margin-left: -112.5px;

  animation: fadeInDown 2s ease;
}

@keyframes fadeInDown {

  0% {
    transform: scale(0);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

CodePen デモ

ブラウザのプレフィックスも必要です(CodePen は Lea Verou -prefix -freeを使用します)

于 2013-09-14T08:57:39.580 に答える