我对
CSS3动画很陌生,我想知道你如何做以下的动画：
我有一个圈子：
我有一个圈子：
在悬停时,我想扩展圆圈的宽度,使其变成药丸形状,并带有如下图所示的过渡：
这就是我试过的.问题是当宽度扩展时,圆会过渡到椭圆：
.logo { background: red; width: 100px; height: 100px; border-radius: 50%; transition: width 2s; } .logo:hover { width: 300px; }
<div class="logo"></div>
解决方法
您只需将border-radius值更改为百分比以外的任何其他单位(列出的所有单位为
here).有关其工作原理以及为什么需要将这些单位用于所需输出的说明,请参阅
Border-radius in percentage (%) vs pixels (px).
使用px的示例.圆圈在悬停时扩展为药丸形状：
.logo { width: 100px; height: 100px; border-radius: 50px; background: red; transition: width 2s; } .logo:hover { width: 300px; }
<div class="logo"></div>
如果您不知道圆的高度,可以设置一个非常高的值,以便圆形在宽度扩展时保持其药丸形状：
.logo { width: 200px; height: 200px; border-radius: 999px; background: red; transition: width 2s; } .logo:hover { width: 400px; }
<div class="logo"></div>
