关键词：
【中文标题】CSS - 带有边框半径的动画比例【英文标题】：CSS - Animation scale with border-radius 【发布时间】：2019-03-19 10:35:46 【问题描述】：我正在制作一个带有缩放框的动画，它以 8 像素四舍五入。参考：https://codepen.io/anon/pen/ePGxqy。但是，当盒子展开时，圆角很奇怪，我不想通过改变它在关键帧中的宽度来缩放它。如何正确缩放带有圆角边框的圆角框？
#box
position: relative;
width: 55px;
height: 55px;
background: #aaa;
margin: 0 auto;
border-radius: 8px;
animation-name: singleRevert;
animation-duration: 3s;
animation-fill-mode: forwards;
#box:hover
animation-name: singleExpend;
animation-duration: 3s;
animation-fill-mode: forwards;
@keyframes singleRevert
0%
transform: scaleX(7.5) scaleY(0.46)
50%
transform: scaleX(1) scaleY(0.46)
100%
transform: scaleX(1) scaleY(1)
@keyframes singleExpend
0%
transform: scaleX(1) scaleY(1)
50%
transform: scaleX(1) scaleY(0.46)
100%
transform: scaleX(7.5) scaleY(0.46)
<div id="box"></div>【问题讨论】：
当你缩放一个元素时，它会拉伸，因此会给出这个结果。一个可能的解决方案是在缩放/动画时也将半径更改为border-radius: 1px / 8px;
【参考方案1】：
基本上，您需要为边框半径设置动画以匹配框的比例。
为简单起见，如果您的框半径为 8 像素，并且您将框缩放 8 倍，那么您的边框半径应为 1 像素。如果您的框缩放为 0.5，则边框将为 16px；
或者，您可以为框的宽度和高度设置动画。这将尊重边界，在这种情况下您不必更改它们。
更新了你的版本：
#box
position: relative;
width: 55px;
height: 55px;
background: #aaa;
margin: 0 auto;
border-radius: 8px;
animation-name: singleRevert;
animation-duration: 3s;
animation-fill-mode: forwards;
#box:hover
animation-name: singleExpend;
animation-duration: 3s;
animation-fill-mode: forwards;
@keyframes singleRevert
0%
transform: scaleX(8) scaleY(0.5);
border-radius: 1px;
50%
transform: scaleX(1) scaleY(0.5)
border-radius: 8px;
100%
transform: scaleX(1) scaleY(1)
border-radius: 8px;
@keyframes singleExpend
0%
transform: scaleX(1) scaleY(1)
border-radius: 8px;
50%
transform: scaleX(1) scaleY(0.5)
border-radius: 8px;
100%
transform: scaleX(8) scaleY(0.5)
border-radius: 1px;
<div id="box"></div>简单版：
#box
position: relative;
width: 55px;
height: 55px;
background: #aaa;
margin: 0 auto;
border-radius: 8px;
animation-name: singleRevert;
animation-duration: 3s;
animation-fill-mode: forwards;
#box:hover
animation-name: singleExpend;
animation-duration: 3s;
animation-fill-mode: forwards;
@keyframes singleRevert
0%
width: 400px;
height: 40px;
50%
width: 55px;
height: 40px;
100%
width: 55px;
height: 55px;
@keyframes singleExpend
0%
width: 55px;
height: 55px;
50%
width: 55px;
height: 40px;
100%
width: 400px;
height: 40px;
<div id="box"></div>【讨论】：
【参考方案2】：使用 transform 对其进行动画处理的问题在于您正在拉伸元素。因此，无论您将其设置为什么边界半径，它都会随着元素的宽度和高度一起被拉伸。 ScaleX 和 ScaleY 缩放整个元素，而不仅仅是尺寸。
在保持边界半径一致的同时为元素的大小设置动画的更好解决方案是为高度和宽度设置动画。像这样的东西会起作用：
@keyframes singleExpend
0%
width: 55px;
height: 55px;
50%
width: 55px;
height: 40px;
100%
width: 400px;
height: 40px;
祝你好运！
【讨论】：
谢谢斯蒂芬！这是通过更改宽度来缩放圆形元素的唯一方法吗？当我阅读medium.com/outsystems-experts/… 时，我们最好执行变换缩放而不是修改宽度。CSS - 将边框半径应用于 gif
】CSS-将边框半径应用于gif【英文标题】：CSS-aplyingborder-radiustoagif【发布时间】：2021-12-1707:36:04【问题描述】：我正在尝试通过给它border-radius来设置gif的样式。但是gif比列本身小，因此边框半径仅适用于gif的右侧。谁能帮我把它... 查看详情
嵌入谷歌地图的iFrame上的CSS边框半径，不起作用
】嵌入谷歌地图的iFrame上的CSS边框半径，不起作用【英文标题】：CSSborder-radiusoniFrameembeddinggooglemaps,notworking【发布时间】：2014-05-0220:48:14【问题描述】：我的网站上有一个按钮，点击它会显示/隐藏一个谷歌地图div（使用iframe嵌... 查看详情
按钮按下动画不适用于边框半径
】按钮按下动画不适用于边框半径【英文标题】：Buttonpressanimationnotworkingwithborder-radius【发布时间】：2019-04-0917:48:21【问题描述】：版本2.0.2复制链接https://play.nativescript.org/?template=play-vue&id=3rSNIU平台和操作系统信息安卓重现步... 查看详情
CSS 响应式边框半径图像
...用border-radius:50%;时，我的图像变成了椭圆形。我希望输出带有该图像的响应圈。我该怎么做？谢谢！#imagewidth:100%;border-radius:50%;<divid="main">&l 查看详情
带有 Knockout 下拉列表问题的边界半径
】带有Knockout下拉列表问题的边界半径【英文标题】：Border-radiuswithKnockoutdrop-downlistissue【发布时间】：2014-08-0723:42:59【问题描述】：尝试将边框半径添加到下拉剔除列表中，但只有“提交”才会接受。其他样式适用于所有。还尝... 查看详情
当父级具有边框半径并且子级具有动画时，CSS溢出隐藏在chrome中不起作用
】当父级具有边框半径并且子级具有动画时，CSS溢出隐藏在chrome中不起作用【英文标题】：CSSoverflowhiddennotworkinginchromewhenparenthasborderradiusandchildhasanimation【发布时间】：2013-06-2207:59:37【问题描述】：现场演示：http://codepen.io/flanker... 查看详情
如何快速在 UIView 上应用带有边框的尖角半径？
】如何快速在UIView上应用带有边框的尖角半径？【英文标题】：HowtoapplysharpcornerradiuswithborderonUIViewinswift?【发布时间】：2018-05-2514:53:12【问题描述】：我想在UIView的边框上设置左下角和右下角的圆角半径。这是代码。**问题是它... 查看详情
如何为元素设置动画而不丢失边框半径？
】如何为元素设置动画而不丢失边框半径？【英文标题】：Howtoanimateanelementandnotloseborder-radius?【发布时间】：2012-06-1116:01:00【问题描述】：我在中心图像上做了一个小动画，它会放大一点，然后恢复到原来的大小。Codehere!问题是... 查看详情
html带有半径边框的google地图(代码片段)
html带有半径边框的google地图(代码片段)
如何在 jquery 中为边框半径设置动画？
】如何在jquery中为边框半径设置动画？【英文标题】：HowcanIalsoanimateborderradiusinjquery?【发布时间】：2017-12-0507:40:49【问题描述】：我正在尝试为div设置动画以扩展宽度（例如滑出动画），但我已经让它工作了，但是我也尝试在发... 查看详情
当使用 css3 缩放元素时，它会变成像素化，直到动画完成之后。我正在为带有边框的元素制作动画
...元素时，它会变成像素化，直到动画完成之后。我正在为带有边框的元素制作动画【英文标题】：whenscalinganelementwithcss3scale,itbecomespixelateduntiljustaftertheanimationiscomplete.I\'manimatinganelementwithaborder【发布时间】：2012-04-1616:36:00【问题... 查看详情
CSS边框半径和边框折叠[重复]
】CSS边框半径和边框折叠[重复]【英文标题】：CSSborderradiusandbordercollapse[duplicate]【发布时间】：2012-10-1420:54:30【问题描述】：我正在尝试在CSS中设置一个边框半径为12px的表格。表格中的tr或td没有边框，只有一个边框围绕整个批... 查看详情
悬停时旋转时带有 CSS 多边形的不需要的边框
】悬停时旋转时带有CSS多边形的不需要的边框【英文标题】：UnwantedborderwithCSSpolygonwhenrotatingonhover【发布时间】：2016-04-1507:18:06【问题描述】：我在CSS中制作了一个T恤形状的多边形，除非我尝试在悬停时对其进行动画处理，否则... 查看详情
带有边框半径和溢出隐藏的转换在 Safari 中不起作用
】带有边框半径和溢出隐藏的转换在Safari中不起作用【英文标题】：Transitionontransformwithborderradiusandoverflowhiddendoesn\'tworkinSafari【发布时间】：2014-11-1112:52:34【问题描述】：这可能是一个常见问题，但我找不到答案。理解这个问题... 查看详情
带有闪烁边框的表格单元格
】带有闪烁边框的表格单元格【英文标题】：Tablecellwithblinkingborders【发布时间】：2014-04-3002:06:46【问题描述】：我正在制作一个需要突出显示表格中的单元格的用户界面。我已经为其他东西使用了着色，所以我需要使用边框。... 查看详情
隐藏/显示带有比例动画的工厂
】隐藏/显示带有比例动画的工厂【英文标题】：hide/showfabwithscaleanimation【发布时间】：2016-04-0520:35:58【问题描述】：我正在使用自定义浮动操作菜单。我需要像这里一样在显示/隐藏菜单按钮上实现缩放动画floatingactionbuttonbehaviou... 查看详情
具有变换比例 CSS 属性的卡片块在悬停时失去其边界半径
】具有变换比例CSS属性的卡片块在悬停时失去其边界半径【英文标题】：CardblockwithatransformscaleCSSpropertylosesitsborder-radiuswhenhovered【发布时间】：2022-01-1805:31:54【问题描述】：当悬停具有transform:scale(1.03)的thoseproductcards时，border-radi... 查看详情