0

tumblr がダッシュボードの新しい投稿アイコンに追加する「バウンス」を再現しようとしています。

そのバウンスを作成するために使用する方法を探していましたがbackground-position、今のところ運がありません.

ここでの他の質問には、を使用backgroundして指定しようとする際に問題がありましたbackground-positionが、私はまったく使用backgroundしていません。

私はこれに多くの時間を費やすつもりはありませんでしたが、今では興味があります。

コードの要点

コデペン

HTML

<div id="container">
 <div class="block blue">
  <div class="inblock light-green"></div>
 </div>
 <div class="block green">
  <div class="inblock orange"></div>
 </div>
 <div class="block yellow">
  <div class="inblock light-blue"></div>
 </div>
 <div class="block blue">
  <div class="inblock light-green"></div>
 </div>
 <div class="block green">
  <div class="inblock orange"></div>
 </div>
 <div class="block yellow">
  <div class="inblock light-blue"></div>
 </div>
</div>

CSS

#container {
  width:80%;
  height: 200px;
  padding-left:5em;
  background-color: #95A5A6;
}

.block {
  margin: 2em;
  height: 130px;
  width: 130px;
  float:left;
  border-radius:10px;
}

.block:hover > .inblock{
  background-color:#E74C3C;
  background-position: top;

}

.inblock {
  height: 80px;
  width: 80px;
  background-color:blue;
  margin: 1.5em;
}

.light-blue {
  background-color:#2980B9

}

.blue {
  background-color:#2C3E50;
}

.green {
  background-color:#27AE60;
}

.yellow {
  background-color:#F1C40F;
}

.orange {
  background-color:#E67E22;
}

.light-green {
  background-color:#2ECC71;
}
4

1 に答える 1

1

ドキュメントから:

CSS の background-position プロパティは、定義された各背景画像の background-origin で定義された背景位置レイヤーに相対的な初期位置を設定します。

(Google Chrome の開発者ツールなどの開発者ツールを使用して) HTML を見ると、Tumblr が実際にスプライトを使用し、background-positionプロパティを使用して CSS3 トランジションを使用してアイコンを上下に移動していることがわかります。

プロパティが設定されていないため、指定したコードではbackground-positionプロパティは何も実行していませんbackground-image

スプライト/画像を使用したくない場合は、transform代わりに CSS3 のプロパティを使用して「バウンス」効果を作成できます。私はアイデアを示す JSFiddle を作成しました: http://jsfiddle.net/7rsbr/

于 2013-03-06T02:13:14.263 に答える