Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.bubble{
animation: move 5s linear infinite;
animation-direction:alternate;
}
//泡泡的运动
@keyframes move {
0%{
transform: translate(0,0);
}
50%{
transform: translate(250px,220px);
}
100%{
transform: translate(520px,50px);
}
}
</style>
</head>
<body>
<svg height="400" width="700">
<defs>
<!--背景的线性渐变-->
<linearGradient id="background">
<stop offset="0%" stop-color="#DCE35B" />
<stop offset="100%" stop-color="#45B649" />
</linearGradient>
<!--光斑的径向渐变，通过fx、fy设置不对称的渐变-->
<radialGradient id="spot" fx="50%" fy="30%">
<stop offset="10%" stop-color="white" stop-opacity=".7"></stop>
<stop offset="70%" stop-color="white" stop-opacity="0"></stop>
</radialGradient>
<!--泡泡本体的径向渐变-->
<radialGradient id="bubble">
<stop offset="0%" stop-color="rgba(255,255,255,0)" ></stop>
<stop offset="80%" stop-color="rgba(255,255,255,0.1)" ></stop>
<stop offset="100%" stop-color="rgba(255,255,255,0.42)"></stop>
</radialGradient>
</defs>
<rect fill="url(#background)" width="100%" height="100%"></rect>
<g class="bubble">
<circle cx="100" cy="100" r="70" fill="url(#bubble)"></circle>
<ellipse rx="50" ry="20" cx="80" cy="60" fill="url(#spot)" transform="rotate(-25, 80, 60)" ></ellipse>
<ellipse rx="20" ry="10" cx="140" cy="130" fill="url(#spot)" transform="rotate(125, 140, 130)" ></ellipse>
</g>
</svg>
</body>
</html>
