我需要一个水泡沫动画-从下往上移动。
这是我的方法,但是不够自然。
显然-正确的时机是个问题。
有什么帮助吗?
var bb = [0,1,2];
function bubles() {
let ran = bb[Math.floor(Math.random() * 3)];
$('.buble').eq(ran).fadeOut().fadeIn();
}
setInterval(function() {
bubles()
},300);
body {
background: lightseagreen;
}
.buble {
fill: white;
fill-opacity: 0.3;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" viewBox="0 0 200 250" id='svga'>
<circle class='buble' cx="50" cy="10" r="3"/>
<circle class='buble' cx="60" cy="20" r="5"/>
<circle class='buble' cx="50" cy="40" r="7"/>
</svg>