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

Question

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

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

благодарит

Answer 1

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

Answer 2

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

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

Больше информации здесь: http://css-tricks.com/snippets/css/rounded-corners/

и использовать функцию JQuery Animate, чтобы изменить ширину этого при наведении курсора мыши :