我对
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>
原文地址:https://www.jb51.cc/css/216155.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。