javascript - 小demo：請教怎么做出類似于水滴不斷擴張的效果？

問題描述

<style> #drop{width:300px;height:300px;border-radius:300px;border:1px solid #000;margin:180px auto 0; }</style> <p id='drop'></p>drop.timer = setInterval(function(){drop.style.cssText = `transition:1s;transform:scale(1.4);opacity:0;transform-origin: 150px 150px; `; },500);

現在我能做到的只是完成一次。但是我想要一直往復循環這個過程，從小到大，從清晰到模糊，然后下一次再重復這個步驟，一直不停的循環。有沒有好的實現思路，請教大家！謝謝！

問題解答

用CSS animation

#drop { width: 300px; height: 300px; border-radius: 300px; border: 1px solid #000; margin: 180px auto 0; transition: 1s; animation: 1s drop infinite; } @keyframes drop { 0% { transform: scale(1); opacity: 1; }100% { transform: scale(1.4); opacity: 0; } }

<p id='drop'></p>

JS什么的都不需要了