javascript - 小demo:请教怎么做出类似于水滴不断扩张的效果?
本文介绍了javascript - 小demo:请教怎么做出类似于水滴不断扩张的效果?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
<style>
#drop{
width:300px;
height:300px;
border-radius:300px;
border:1px solid #000;
margin:180px auto 0;
}
</style>
<div id="drop"></div>
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;
}
}
<div id="drop"></div>
JS什么的都不需要了
这篇关于javascript - 小demo:请教怎么做出类似于水滴不断扩张的效果?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文