javascript - 小demo：请教怎么做出类似于水滴不断扩张的效果？-PHP Chinese Network Q&A

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

javascript - 小demo：请教怎么做出类似于水滴不断扩张的效果？

黄舟 2017-04-17 15:18:52

347

 
 drop.timer = setInterval(function(){ drop.style.cssText = `transition:1s; transform:scale(1.4); opacity:0; transform-origin: 150px 150px; `; },500);

现在我能做到的只是完成一次。但是我想要一直往复循环这个过程，从小到大，从清晰到模糊，然后下一次再重复这个步骤，一直不停的循环。有没有好的实现思路，请教大家！谢谢！

黄舟

人生最曼妙的风景，竟是内心的淡定与从容！

reply all (1)

迷茫2017-04-17 15:20:52 1 floor

用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; } }

JS什么的都不需要了