这个用css如何实现

没了头秃了这个用css如何写出来，求完整思路，实在看不明白求程序猿看一下。怎么实现

1.简单粗暴地只是使用<img>标签插入这个图片，或者使用background-image属性将其作为背景
2.纯css实现，需要两个div，第一个div作为容器盒子，设置满屏宽高，然后使用backgrond属性，取值为linear-gradient(),用作颜色渐变背景；第二个div作为气泡，可以通过绝对定位定位到相应位置，然后通过border-radius设置成一个原型，然后添加box-shadow等属性添加阴影等。

背景fixed加渐变色，flex布局，中间一个border-radius等于二分之一宽的白色边框元素，宽高一致，背景一样渐变色，不过是有焦点的

实现思路：
1、先实现渐变背景：将背景色设为渐变（注意设置首尾颜色相同，否则动画时会出现明显分界线）

   background:linear-gradient(to bottom,#DFDFF5 ,#FF9980,#FFF280,#FFC080,#DFDFF5); 

2、将背景动起来：先用 background-size 将背景图像的尺寸扩大； 通过 @keyframes 规则，创建动画：通过 background-position 设置背景图像运动的起始位置和终止位置。
3、实现气泡：我通过li标签，将每个li通过css设置样式为气泡状（圆形、半透明中央、实线边框）。
4、使气泡动起来：首先使气泡的 bottom 值为一个比较大的负数，才能使气泡从底下升上去； 通过 @keyframes 规则，创建动画：使用 translateY() 转换气泡Y轴的值，使气泡上升。
5、产生多个不同颜色、大小、不同位置上升的气泡：使用 jQuery循环添加li节点，即添加多个气泡； 每个节点添加不同样式：这里需要注意的是使用eq() 方法 匹配当前节点。

html代码

<div class="background"> <ul id="ul-cir"></ul> </div>

css代码

body{
    padding:0;
    margin:0;    
}
div.background{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; 
    background:linear-gradient(to bottom,#DFDFF5,#FF9980,#FFF280,#FFC080,#DFDFF5); /*背景渐变色*/
    background-size:200% 200%;
    animation:bjmove 30s infinite linear;
}
@keyframes bjmove{ /*背景移动动画*/
    from {background-position: 0 200% ;}
    to {background-position:0 0;}
}
 
.li-cir{
    list-style:none; /*去除ul li的默认样式*/
    width:30px;
    height:30px;
    border-radius:50%;
    position: absolute;
    bottom:-160px;
    animation: ppmove 15s infinite;
}
@keyframes ppmove { /*泡泡移动动画*/
  0% {
    opacity: 0.5;
    transform: translateY(0px)  }
  25% {
    opacity: 0.8;
    transform: translateY(-400px) }
  50% {
    opacity: 1; 
    transform: translateY(-600px) }
  100% {
    opacity: 1; 
    transform: translateY(-1000px) } 
}

jQuery：

$(document).ready(function(){
    
    for(var i=0; i<9; i++){
        var rand = new Array();//rgb色彩值
        for(var j=0; j<3; j++){
            rand[j] = Math.floor(Math.random() * 26 + 230); // 230 ~ 255
        }
        var  op = Math.floor(Math.random()* 5 + 2) / 10; //均衡获取rgba的透明度的随机数
        var left = Math.floor(Math.random()* 100 )+"%"; //泡泡随机分布的距离
        var delay = Math.floor(Math.random()* 10)+"s"; //每个泡泡出现推迟的时间
        var dur = Math.floor(Math.random()* 10 + 11)+"s"; //泡泡完成一个周期所需要的时间
        var enlarge = Math.floor(Math.random()* 40 + 30); //泡泡扩大到的宽和高
        
        $("#ul-cir").append("<li class='li-cir'></li>"); //增加一个泡泡
        $("#ul-cir li").eq(i).css("background","rgba("+rand[0]+","+rand[1]+","+rand[2]+","+op+")");//选取ul li中匹配的索引顺序为i的元素赋予背景颜色
        $("#ul-cir li").eq(i).css("border","rgba("+rand[0]+","+rand[1]+","+rand[2]+","+1+") 1px solid");//给泡泡加上边框
        $("#ul-cir li").eq(i).css("left",left); //泡泡出现的距离值
        $("#ul-cir li").eq(i).css("animation-delay",delay); //泡泡出现推迟的时间
        $("#ul-cir li").eq(i).css("animation-duration",dur); //泡泡完成一个周期所需要的时间
        $("#ul-cir li").eq(i).css("width",enlarge).css("height",enlarge); //扩大泡泡
    }
});