随机产生“涟漪”（2018-08-11）

生活中总有些有趣的事情发生，有些不尽人意，但是都要尝试过，才知结果如何。

---

早上写了随机产生泡泡，跟这很像的就是这个“涟漪”。随机泡泡是单层的圈圈，而涟漪是多层的圈圈，但用到的都是css3和js的基本使用。

实现关键：

• css3 的渐变的使用，控制圆形的产生消失，及动画间隔时间
• 创建节点，随机产生多层的圆圈
• 每个“涟漪”的定位
• 圆圈的边框设置随机色
• 创建节点需要定位时，先定位，在追加到父元素中

---

那现在就看看怎么实现的吧：

(css3控制圆的产生消失，.node是添加的节点样式，重点是box的定位。其余与上篇一样)
  *{
            margin: 0;
            padding:0;
        }
        body{
            background-image: url("../Image/00.jpg");
            background-repeat: no-repeat;
            background-size: 1800px 850px;
        }
        #container{
            width: 100%;
            height: 100%;
            position: absolute;
            overflow: hidden;
        }
       .node{
            width:100px;
            height: 100px;
            border: 3.2px solid #448fea;
            border-radius: 50%;
            position: absolute;
            opacity: 0;
            animation: mywaves 5s infinite;

        }
       .box{
           position:absolute;
       }
        @keyframes mywaves {
            from{
                opacity: 0.8;
                height: 0;
                width: 0;
                top:50%;
                left: 50%;
            }
            to{
                width: 100%;
                height: 100%;
                opacity: 0;
                top:0;
                left: 0;
            }
        }

（先定位，再追加到父元素中）
<script>
 var  container = document.getElementById("container");
 var width=document.documentElement.clientWidth;  //得到屏幕的宽和高
 var height=document.documentElement.clientHeight;
 window.onload = function (ev) {
      getCircle();
 };
 function getCircle() {
     for(var j = 0;j<10;j++){   //循环生成多个涟漪
         var div=document.createElement('div'); //创建每个涟漪的父元素
         div.style.width =200+'px';  //给产生的每个涟漪定位
         div.style.height =200+'px';  
         div.style.top = Math.random()*width+50 + 'px';   //随机产生位置
         div.style.left = Math.random()*height+50 + 'px';
         div.className='box';
         for(var i = 0;i<4;i++){  //循环生成多层圆圈，形成涟漪
             var node = document.createElement("div"); 
            //创建每个涟漪的子元素，表示有几层涟漪
             node.className = 'node';
             node.style.borderColor =getColor();//设置每层圆圈的边框为随机色
             node.style.animationDelay = i+'s';  //通过控制动画的延迟时间，产生涟漪
             div.appendChild(node); //将子级节点追加到父级节点
         }
         container.appendChild(div); 
        //将创建的父元素节点追加到整个最大的父元素中，在定位之后
     }
 }
//产生随机色
 function getColor() {
     var r = Math.floor(Math.random()*256);
     var g = Math.floor(Math.random()*256);
     var b = Math.floor(Math.random()*256);
     return "rgb("+r+","+g+","+b+")";
 }

来看下效果图：（个人觉得没有想象中的好看，还有点丑，还需要改进吧）

就是这样啦，一层层的圈圈，就想涟漪一样荡开，再消失 随着内层的圈圈产生，外层的逐渐消失，一直循环

---

就是这样啦，算学以致用吧，虽然其中不乏学姐改bug的功劳，但是自己也算进步吧。加油！