在CSS转换期间绘制边框颜色

按钮{
背景：无；
边界：0；
框大小：边框框；
边缘：1米；
填料：1米2米；
框阴影：插入0 2px#f45e61；
颜色：#f45e61；
字体大小：继承；
字号：700；
位置：相对位置；
垂直对齐：中间对齐；
}
按钮：：前，按钮：：后{
框大小：继承；
内容：“；
位置：绝对位置；
宽度：100%；
身高：100%；
}
.抽签{
过渡：颜色0.25s；
}
.draw:：之前，.draw:：之后{
边框：2倍实心透明；
宽度：0；
身高：0；
过渡：宽1.25s缓减1.25s，高1.25s缓减1.25s；
}
.draw：：之前{
排名：0；
左：0；
}
.draw：：之后{
底部：0；
右：0；
}
.画：悬停{
颜色：#60daaa；
}
.draw:hover:：before.draw:hover:：after{
宽度：100%；
身高：100%；
}
.draw:hover:：before{
边框顶部颜色：#60daaa；
右边框颜色：#60daaa；
过渡：宽0.25s缓降，高0.25s缓降0.25s；
}
.draw:hover:：after{
边框底色：#60daaa；
左边框颜色：#60daaa；
过渡：边框颜色0s缓和0.5s，宽度0.25s缓和0.5s，高度0.25s缓和0.75s；
}

画

我将使用多个

线性渐变和一个复杂的动画（通过对每个动画的大小/位置设置动画）来获得最终结果。如果获得了该技巧，可以轻松调整不同的值以获得所需的任何动画


.draw{
填充：20px 50px；
大纲：无；
边界：无；
盒影：无；
背景图像：
线性梯度（#f45e61，#f45e61），
线性梯度（#f45e61，#f45e61），
线性梯度（#f45e61，#f45e61），
线性梯度（#f45e61，#f45e61），
线性梯度（#60daaa，#60daaa），
线性梯度（#60daaa，#60daaa），
线性梯度（#60daaa，#60daaa），
线性梯度（#60daaa，#60daaa）；
背景位置：0,0,0,0,100%，0,100%，
0 0, 0 0, 0 100%, 100% 0;
背景尺寸：3px 0%，0%3px，0%3px，3px 0%，
3px 100%，100%3px，100%3px，3px 100%；
背景色：透明；
背景重复：无重复；
过渡：0.2s线性；
}
.画：悬停{
背景位置：0 100%，0 0，0 100%，100%0，
0 0, 0 0, 0 100%, 100% 0;
背景尺寸：3px 0%，100%3px，0%3px，3px 0%，
3px 100%，100%3px，100%3px，3px 100%；
动画：动画1.4s线性无限0.2s；
}
@关键帧设置动画{
0% {
背景位置：0 100%，0 0，0 100%，100%0，
0 0, 0 0, 0 100%, 100% 0;
背景尺寸：3px 0%，100%3px，0%3px，3px 0%，
3px 100%，100%3px，100%3px，3px 100%；
}
40% {
背景位置：0 100%，100%0，100%100%，100%0，
0 0, 0 0, 0 100%, 100% 0;
背景尺寸：3px 0%，100%3px，0%3px，3px 100%，
3px 100%，100%3px，100%3px，3px 100%；
}
60% {
背景位置：0 100%，100%0，100%100%，100%100%，
0 0, 0 0, 0 100%, 100% 0;
背景尺寸：3px 0%，0%3px，100%3px，3px 100%，
3px 100%，100%3px，100%3px，3px 100%；
}
70% {
背景位置：0 100%，100%0，0%100%，100%100%，
0 0, 0 0, 0 100%, 100% 0;
背景尺寸：3px 100%，0%3px，100%3px，3px 0%，
3px 100%，100%3px，100%3px，3px 100%；
}
80% {
背景位置：0%0%、0%0、0%100%、100%100%，
0 0, 0 0, 0 100%, 100% 0;
背景尺寸：3px 100%，0%3px，0%3px，3px 0%，
3px 100%，100%3px，100%3px，3px 100%；
}
100% {
背景位置：0%0%、0.0、0.100%、100%100%，
0 0, 0 0, 0 100%, 100% 0;
背景尺寸：3px 0%，100%3px，0%3px，3px 0%，
3px 100%，100%3px，100%3px，3px 100%；
}
}
Draw
loop ever whie on hover？在我看来，这更像是一项动画工作，而不是过渡！CSS动画为您提供了Gerardo建议的循环选项。太棒了！这几乎就是我要找的！我添加了一个无限动画循环，唯一的问题是，当边框底部返回到其原始颜色时（我前面提到的颜色更改流上的最后一项），上边框不会更改颜色。您能告诉我应该更改您以前的代码以使其工作吗？这很有价值，但我真的不明白他们做了什么honest@JorelAmthor嗯，这是一个小缺点：）当动画结束时，它们都消失了，所以不容易总是显示一个边框，因为在开始时有0个边框…但我正在尝试找出一个技巧：）。。。顺便说一句，这些值看起来很难，但简单地想象一下，你有8个渐变，每个渐变都有一个大小和位置，所有这些都定义在同一个属性中，因此请删除动画并播放值以了解它们的工作方式：）我有点明白，但在绘制每个边框时，我很难锁定点：/如果有帮助，它不一定要从右上角开始@特马尼Afif@JorelAmthor好吧，我将尝试添加更多解释；）我知道这有点棘手：）。。。给我几分钟；）棒极了！我希望我能投更多的票！非常感谢