使用CSS的发光边框动画没有流畅的过渡

5jdjgkvh  于 2022-12-05  发布在  其他
关注(0)|答案(1)|浏览(147)

我在youtube上看了一个关于如何创建Glowing Border Animation with CSS的教程
我自己尝试过,并且非常成功,但是我遇到了一个无法解决的问题。当我观看动画时,有一个不均匀的过渡。看起来好像两个图像粘在一起,颜色过渡被切断了。
我如何才能解决这个问题,让我的过渡看起来很顺利?
我创建了一个JSFiddle来显示我的意思:
第一个
注:动画起初看起来很平滑,但大约7秒后,你会遇到“切断”,过渡没有排成一行。

n53p2ov0

n53p2ov01#

你的渐变需要有一种重复来达到这样的效果。使它的大小为200% 200%,然后使用一个重复渐变,其中第一个颜色开始于0%,最后一个颜色开始于50%。注意颜色列表是如何以相反的顺序重复两次的。
第一个

相关问题