具有径向梯度的波纹 animation

Question

我想在一个矩形内创建无限波纹 animation 。 我这边的基本想法是开始将一个圆圈设置为另一个圆圈。 但是output就比较尴尬了。

下面是我的代码——

 body { background: #454a59; }.ripple { width: 400px; height: 80px; margin-top: 40px; position: relative; background-color: red; border-radius: 10px; color: #fff; display: flex; justify-content: center; align-items: center; animation: blinds 3s linear infinite; } @keyframes blinds { 0% { background-image: radial-gradient(circle, #ff8895 0 70px); } 20% { background-image: radial-gradient(circle, #ff8895 0 70px, rgba(255, 255, 255, 0.4) 70px 100px, transparent 100px 100%); } 40% { background-image: radial-gradient(circle, #ff8895 0 70px, rgba(255, 255, 255, 0.4) 70px 100px, rgba(255, 255, 255, 0.3) 100px 125px, transparent 125px 100%); } 60% { background-image: radial-gradient(circle, #ff8895 0 70px, rgba(255, 255, 255, 0.4) 70px 100px, rgba(255, 255, 255, 0.3) 100px 125px, rgba(255, 255, 255, 0.4) 125px 150px, transparent 150px 100%); } 80% { background-image: radial-gradient(circle, #ff8895 0 70px, rgba(255, 255, 255, 0.4) 70px 100px, rgba(255, 255, 255, 0.3) 100px 125px, rgba(255, 255, 255, 0.4) 125px 150px, rgba(255, 255, 255, 0.4) 150px 175px, transparent 175px 100%); } 100% { background-image: radial-gradient(circle, #ff8895 0 70px, rgba(255, 255, 255, 0.4) 70px 100px, rgba(255, 255, 255, 0.3) 100px 125px, rgba(255, 255, 255, 0.4) 125px 150px, rgba(255, 255, 255, 0.4) 150px 175px, rgba(255, 255, 255, 0.4) 175px 200px, transparent 200px 100%); } }

 <div class="ripple"> </div>

animation 也不是光滑的，最终会变得不可见。

任何帮助，将不胜感激。

提前致谢。

Answer 1

使用多个渐变并为其大小设置动画。 下面是一个示例，您可以在其中调整值，直到获得所需的结果。

 body { background: #454a59; }.ripple { width: 400px; height: 80px; margin-top: 40px; position: relative; background-color: red; border-radius: 10px; color: #fff; display: flex; justify-content: center; align-items: center; animation: blinds 5s ease-in-out infinite; background: radial-gradient(#ff8895 70%,#0000 71%), /* 1 */ radial-gradient(rgba(255, 255, 255, 0.4) 70%,#0000 71%), /* 2 */ radial-gradient(rgba(255, 255, 255, 0.3) 70%,#0000 71%), /* 3 */ radial-gradient(rgba(255, 255, 255, 0.4) 70%,#0000 71%), /* 4 */ radial-gradient(rgba(255, 255, 255, 0.3) 70%,#0000 71%) /* 5 */ red; background-position: center; background-repeat: no-repeat; } @keyframes blinds { 0% {background-size: 0 0} /* 1, 2, 3, 4, 5*/ 20% {background-size: 70px 70px, 0 0,0 0,0 0,0 0} 40% {background-size: 70px 70px, 100px 100px,0 0,0 0,0 0} 60% {background-size: 70px 70px, 100px 100px,125px 125px,0 0,0 0} 80% {background-size: 70px 70px, 100px 100px,125px 125px,150px 150px,0 0} 100%{background-size: 70px 70px, 100px 100px,125px 125px,150px 150px,175px 175px} }

 <div class="ripple"> </div>