1

CSS3 を使用してトランジションを作成したいのですが、このテーマに慣れていないため、自分のアイデアをどのように開始すればよいかわかりません。私はいくつかの調査を行いましたが、非常に具体的な考えを念頭に置いていましたが、その例はあまりありません。

最初に最初のカードのみを表示するトランジションを作成したいのですが、カーソルを合わせると画像ボックスがゆっくりと広がり、他のカードが表示されます。

これがイメージです

誰もこれを行う方法について考えを持っていますか? それは私にとって大きな助けであり、良い教訓になるでしょう。

前もって感謝します

4

1 に答える 1

3

<div class="cards">画像の背景を持つ要素を作成します。

div.cards {
  width: 43px;
  /* width of one card */
  height: 65px;
  background: url(http://i.stack.imgur.com/ivCAY.png) 0 0 no-repeat;
  -webkit-transition: width 2s;
  transition: width 2s;
}
/* then on hover: */

div.cards:hover {
  width: 550px;
  /* width of full image */
}
<div class=cards />

于 2013-05-28T10:02:08.717 に答える