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

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

0 голосов
/ 20 марта 2012

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

enter image description here

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

спасибо

Ответы [ 2 ]

1 голос
/ 20 марта 2012

Вы будете использовать 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 или как угодно.

1 голос
/ 20 марта 2012

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

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

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

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

...