如何在html/css中拉伸圖像段

我有一個圖像是一個圓形，當有人將它懸停在它上面時，我希望它能夠水平拉伸和拉長，但我希望它只拉伸圖像的中心，同時保持左側/右側的曲線。所以像這樣如何在html/css中拉伸圖像段

enter image description here

我爲我的可怕油漆技能道歉。如果這是不可能的一個簡單的CSS設置或什麼的，有沒有其他的方法來將動畫圈入此？

感謝

2012-03-19 Andrew Park

你將如何動畫這張圖片？ – huzzah 2012-03-19 21:46:26

以及我知道的唯一方法是使用jquery'$（element）.animate（{}）;'但我不知道如何設置它或任何東西 – 2012-03-19 21:50:51

您將使用3張圖片。每一個都包含曲線，然後是一個只有你需要的寬度的中間圖像。您將在自己的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;

}

然後就打電話給你的div常規HTML格式。使用JQuery進行動畫製作對於動畫來說是一個很好的解決方案，因爲您可以獲得很好的轉場。你想要做的就是告訴JQuery只在中間div動畫時，通過將寬度改變爲你需要的寬度，例如從15px到100px等等。

來源

2012-03-19 21:58:05 huzzah

你可以使用CSS和圓角邊框創建圈子：

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

此處瞭解詳情：http://css-tricks.com/snippets/css/rounded-corners/

，並使用jQuery的動畫功能在懸停改變它的寬度：

來源

2012-03-19 21:53:46

如何在html/css中拉伸圖像段

回答

相關問題