1

スライドショーのコントロールを備えたスプライト画像があります。

ユーザーがコントロールにカーソルを合わせたときに、各コントロールの背景位置を変更して、アクティブに見えるようにします。

使ってます：

-moz-transition: background-position 0.45s linear;
-webkit-transition: background-position 0.45s linear;
-o-transition: background-position 0.45s linear;

私のコードはこのフィドルにあります（どうやらbg画像は私のコントロールではなくランダムな画像です）。

トランジション効果は、bg画像が実際に動くように見える現在の効果ではなく、アイテムにカーソルを合わせたときに誰かが期待するもの（おそらくフェード）にしたいと思います。

何か案は？

4

2 に答える 2

5

これを実現する1つの方法は、ホバー時に表示するスプライトの領域を表示するようにbackground-positionを設定して、アンカータグ内に非表示のスパンを配置することです。最初、このスパンは不透明度0で非表示になります。

次に、ホバーすると、背景位置を遷移する代わりに、不透明度を遷移してフェードインすることができます。

コードは次のようになります。

html

<a><span></span></a>

css

a {
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 50px;   
  background-image: url("http://example.com/somepic.jpg");
}

a span {
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  background-image: url("http://example.com/somepic.jpg");
  background-position: 150px 210px;
  opacity: 0;
  -moz-transition: opacity 0.45s;
  -webkit-transition: opacity 0.45s;
  -o-transition: opacity 0.45s;
}

a:hover span {
  opacity: 1;
}​​​

これはhttp://jsfiddle.net/hespb/5/でデモできます

于 2012-12-07T12:52:56.847 に答える
-1

コードによって背景の位置が変わります。

背景位置：150px 210px;

顔を合わせるには、背景色を変更し、不透明度を追加してアニメートする必要があります。

  背景：rgba（255,255,255,0）;
于 2012-12-07T12:13:30.650 に答える