gpt4 book ai didi

css - 是否可以使用转换 : scaleX() without affecting the border-radius?

转载 作者:行者123 更新时间:2023-12-04 22:30:29 26 4
gpt4 key购买 nike

我正在尝试生成一个简单的扩展条动画。除了受 scaleX() 转换影响的不断变化的 border-radius 外,一切正常,我可以根据自己的喜好控制它。有没有办法避免这种影响?

我假设为 border-radius 使用绝对单位就足够了,但事实并非如此。 scaleX() 仍然影响它。

重要提示:

我想使用 scaleX() 而不是使用 width 属性,因为我正在处理的元素具有各种变化的宽度,而我只想有一个动画与他们一起工作。

div {
width: 200px;
height: 20px;
background-color: pink;
border-radius: 10px;
animation: expand;
animation-duration: 10s;
animation-iteration-count: infinite;
}

@keyframes expand {
from {
transform: scaleX(0.1);
}
to {
transform: scaleX(1);
}
}
<div />

最佳答案

I want to use scaleX() rather than working with the width property because the elements i am working on come with various changing widths and I want to have only one animation to work with them all.

不要指定 to,您的动画将适用于任何宽度:

.bar {
width: 200px;
height: 20px;
background-color: pink;
border-radius: 10px;
animation: expand;
animation-duration: 10s;
animation-iteration-count: infinite;
}

@keyframes expand {
from {
width:20px;
}
}
<div class="bar"></div>

<div class="bar" style="width:100px"></div>
<div class="bar" style="width:40px"></div>

关于css - 是否可以使用转换 : scaleX() without affecting the border-radius?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59772063/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com