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 张图像。侧面各一个，包括曲线，然后是一个中间图像，其宽度与您需要的一样宽。您将使用这些图像作为它们自己的 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 制作动画是一个很好的动画解决方案，因为您可以获得漂亮的过渡。您要做的是告诉 JQuery 仅在悬停时为中间 div 设置动画，方法是将宽度更改为您需要的任何值，例如从 15px 到 100px 或其他任何值。