Как растянуть сегмент изображения в html / css

Question

У меня есть изображение в виде круга, и когда кто-то наводит на него курсор, я хочу, чтобы оно анимировалось и удлинялось по горизонтали, но я хочу, чтобы оно растягивало только центр изображения, сохраняя кривые слева / справа.так что-то вроде этого

Я прошу прощения за свои ужасные навыки рисования.если это невозможно с простой настройкой CSS или чем-то еще, есть ли альтернативные способы оживить круг в этом?

спасибо

Answer 1

Вы будете использовать 3 изображения. По одному на каждой стороне, охватывающий кривые, затем среднее изображение, которое настолько широкое, насколько вам нужно. Вы будете использовать эти изображения в качестве фоновых изображений внутри своих собственных элементов div, а среднее изображение, которое вы хотите сделать повторяющимся-x, настолько большим, насколько вам нужно, как до анимации, так и при ее переходе. Не забудьте установить ширину и высоту для каждого элемента, иначе они будут разрушаться, так как они технически пусты. Вам также нужно сместить ваши 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;

}

Тогда просто вызывайте ваши div в обычном html. Использование JQuery для анимации является отличным решением для анимации, поскольку вы получаете красивые переходы. Что вы хотите сделать, так это сказать JQuery, что нужно анимировать только средний div при наведении курсора, изменяя ширину на то, что вам нужно, скажем, от 15px до 100px или как угодно.

Answer 2

Вы можете создать круг, используя css и скругленные границы:

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

Более подробная информация здесь: http://css -tricks.com / snippets / css / закругленные углы /

И используйте функцию jQuery Animate, чтобы изменить ее ширину при наведении: http://api.jquery.com/animate/