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什么的都不需要了