html - html/cssで画像のセグメントを引き伸ばす方法

Question

円の画像があり、誰かがその上にカーソルを置いたときにアニメーション化して水平に伸ばしたいのですが、左右の曲線を維持しながら画像の中心だけを伸ばしたいです。だからこのようなもの

拙い塗装で申し訳ありません。単純な css 設定などでこれが不可能な場合、これに円をアニメーション化する別の方法はありますか?

ありがとう

Answer 1

css と丸い境界線を使用して円を作成できます。

.circle {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

詳細はこちら: http://css-tricks.com/snippets/css/rounded-corners/

jQuery Animate 関数を使用して、ホバー時の幅を変更します: http://api.jquery.com/animate/

Answer 2

3枚の画像を使用します。側面に 1 つずつ、曲線を取り囲んでから、必要な幅だけの中央の画像を作成します。これらの画像を独自の div 内の背景画像として使用し、中間の画像を必要なだけ大きくするために、アニメーションの前と遷移時の両方で x を繰り返します。各 div の幅と高さを設定することを忘れないでください。そうしないと、技術的に空であるため、折りたたまれます。また、div を左にフロートさせ、パディングやマージンがないことを確認する必要があります。そうしないと、ギャップが発生します。このCSSを試してください：

#div1 {
   background-image:url(leftcurve.png);
   background-repeat:no-repeat;
   width:15px;
   height:100px;
   float:left;
   padding:0;
   margin:0;
 }
 #div2 {
   background-image:url(middle.png);
   background-repeat:repeat-x;
   width:15px;
   height:100px;
   float:left;
   padding:0;
   margin:0;
}
#div3 {
   background-image:url(rightcurve.png);
   background-repeat:no-repeat;
   width:15px;
   height:100px;
   float:left;
   padding:0;
   margin:0;

}

次に、通常の html で div を呼び出します。JQuery を使用してアニメーション化することは、優れたトランジションが得られるため、アニメーションの優れたソリューションです。あなたがしたいことは、ホバー時に中央のdivのみをアニメーション化するようにJQueryに指示することです。幅を必要に応じて、たとえば15pxから100pxなどに変更します。