纯CSS实现背景渐变、球和阶梯的跳动

纯CSS实现背景渐变、球和阶梯的跳动

作者：马光佳
撰写时间：2019.1.17
开发工具与关键技术：MicrossftVisualStudio、animation与@keyframes的配合使用

• 背景动画渐变
  （1）background-size:100%时的背景图片
  先把背景颜色设置为100%，颜色的分布图如下：
  
  代码如下:
• 把body设置为最大的背景，背景有五种颜色，都设置半透明，还让每一种颜色都有45度的斜度，并且让每一种颜色都有自己的渐散范围（度）；代码已注释

body {
   height: 100%;
   display: flex;
   align-items: center;/*垂直对齐*/
   justify-content: center;/*内容对齐*/
   /*linear-gradient：线性渐变；设置每一种颜色有一个斜度并且透明*/
   background: linear-gradient(45deg,rgba(111, 199, 181, 0.82) 0%,rgba(19, 189, 206, 0.82), 20%,rgba(0, 148, 217, 0.82) 40%, rgba(90, 54, 148, 0.82) 60%, rgba(238, 77, 116, 0.82) 80%, rgba(245, 140, 88, 0.82) 100%);            
   background-size:100%;/* 将背景放大 */           
   background-position: 0% 100%; /* 设置定位显示背景左下角颜色区域 */
   position: relative;            
   animation: gradient 7.5s ease-in-out infinite;/* 设置无限轮播动画 */
}    

（2）background-size:400%时的背景图片
把背景颜色设置为400%，颜色的分布图如下：

代码如下：

• 把body的背景放大为400%，结合animation与@keyframes的使用，使得背景按固定的方向以无限循环的状态展示动画效果，代码已注释

body {
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     /*linear-gradient：线性渐变；设置每一种颜色有一个斜度并且透明*/
     background: linear-gradient(45deg,rgba(111, 199, 181, 0.82) 0%,rgba(19, 189, 206, 0.82), 20%,rgba(0, 148, 217, 0.82) 40%, rgba(90, 54, 148, 0.82) 60%, rgba(238, 77, 116, 0.82) 80%, rgba(245, 140, 88, 0.82) 100%);            
     background-size: 400%;/* 将背景放大 */           
     background-position: 0% 100%; /* 设置定位显示背景左下角颜色区域 */
     position: relative;            
     animation: gradient 7.5s ease-in-out infinite;/* 设置加速然后减速的轮播无限动画并且来回的时间为7.5s*/
 }        
 /*设置gradient在0%-100%之间的运动状态*/
 @keyframes gradient {
     0% {
         background-position: 0% 100%;
     }
     /*线性背景从左下角以匀速往右上角做渐变运动*/
     50% {
         background-position: 100% 0%;
     }
     /*线性背景从右上角以匀速往左下角做渐变运动*/
     100% {
         background-position: 0% 100%;
     }
 }

1. 球和阶梯的动画跳动
   （1）搭建五根柱子和球
   搭建好的图片如下：
   
   柱子和球的结构
   代码如下：

<div class="loader"> 
     @*第一条柱子*@
     <div class="loader_bar"></div>
     @*第二条柱子*@
     <div class="loader_bar"></div>
     @*第三条柱子*@
     <div class="loader_bar"></div>
     @*第四条柱子*@
     <div class="loader_bar"></div>
     @*第五条柱子*@
     <div class="loader_bar"></div>   
     @*球*@    
     <div class="loader_ball"></div>
</div>

柱子高度的设置：
transform:scale(x,y)改变y轴就是改变高度，原本高度为1，以（0.2,0.4,0.6,0.8,1）分别设置第一条柱子到最后一条柱子的高度，并且要设置每一根柱子以底部对齐（transform-origin:bottom;）形成一个规范的阶梯形状
代码如下：

 /*柱子的样式*/
.loader_bar{
    width:10px;
    height:50%;
    background-color:#fff;
    position:absolute;
    bottom:0px;
    transform-origin:bottom;/*起始点对齐*/
    box-shadow:1px 1px 0 rgba(0,0,0,0.2);
}
/*球的样式*/
.loader_ball{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#fff;
    position:absolute;
    bottom:10px;
    left:0px;
    animation:ball 4s infinite;/*动画*/
}
 .loader_bar:nth-child(1){/*第一条柱子*/
     left:0;
     transform:scale(1,0.2);/*改变y轴的高度*/
     animation:barUp1 4s infinite;/*让架构（barUp1）在4s无限运动*/
        }
 .loader_bar:nth-child(2){/*第二条柱子*/
     left:15px; 
     transform:scale(1,0.4);
     animation:barUp2 4s infinite;
 }
 .loader_bar:nth-child(3){/*第三条柱子*/
     left:30px;
     transform:scale(1,0.6);
     animation:barUp3 4s infinite;
 }
  .loader_bar:nth-child(4){/*第四条柱子*/
     left:45px;
     transform:scale(1,0.8);
     animation:barUp4 4s infinite;
 }
 .loader_bar:nth-child(5){/*第五条柱子*/
     left:60px;
     transform:scale(1,1);
     animation:barUp5 4s infinite;/*无限动画*/
 }

2. 球以匀速无限循环的状态代码如下
   上面设置球（animation:ball 4s infinite;）以变量ball在4s做无限循环运动，然而用（@keyframes ball）的配合，让球做固定线路无限运动
   代码如下：

@keyframes ball{
 /*球跳的去程*/
  0%{
       transform:translate(0,0);
  }         
  5%{
      transform:translate(8px,-14px);
  }
  10%{
  /*实现踩下的效果*/
      transform:translate(15px,-10px);
  }
  15%{
      transform:translate(23px,-24px);              
  }
  20%{
   /*实现踩下的效果*/
      transform:translate(30px,-20px);
  }
  25%{
      transform:translate(38px,-34px);
  }
  30%{
   /*实现踩下的效果*/
      transform:translate(45px,-30px);
  }
  35%{
      transform:translate(53px,-44px);
  }
  40%{
   /*实现踩下的效果*/
      transform:translate(60px,-40px);
  }         
  50%{
      transform:translate(60px,0px);
  }
  /*球跳的回程*/
  55%{
      transform:translate(53px,-14px)
  }
  60%{
   /*实现踩下的效果*/
       transform:translate(45px,-10px)
   }
  65%{
       transform:translate(37px,-24px)
    }
  70%{
   /*实现踩下的效果*/
       transform:translate(30px,-20px)
   }
  75%{
       transform:translate(22px,-34px)
     }
  80%{
   /*实现踩下的效果*/
       transform:translate(15px,-30px)
     }
  85%{
       transform:translate(7px,-44px)
     }
  90%{
   /*实现踩下的效果*/
       transform:translate(0px,-40px)
     }
 100%{
       transform:translate(0,0)
     }
 }

1. 实现踩下效果的一个思路图

2. 无踩下效果的思路图

• 柱子高度在4s后的高度变化代码如下：
  上面已设置每一个柱子都有一个变量（animation:barUp1 4s infinite;）去结合（@keyframes）的使用，设置百分百来改变柱子在那一刻的高度，并且用代码设置：（transform:scale(x,y)
  代码如下：

@keyframes barUp1{/*第一条柱子*/
    0%{/*从左开始运动*/
        transform:scale(1,0.2);/*当球运动4s内时柱子高度为原来的0.2倍*/
    }
    40%{
        transform:scale(1,0.2);/*当球运动4s内时柱子高度为原来的0.2倍*/
    }
    50%{/*4s后结束，球将从右以0s开始运动*/
        transform:scale(1,1)/*当球运动4s时柱子高度变成原来的高度*/
    }
    90%{
        transform:scale(1,1);/*当球运动4s内时柱子高度为原来的高度*/
    }
    100%{
        transform:scale(1,0.2);/*当球运动4s时柱子高度变成原来的0.2倍*/
    }
}

@keyframes barUp2{/*第二条柱子*/
    0%{/*从左开始运动*/
        transform:scale(1,0.4);/*当球运动4s内时柱子高度为原来的0.4倍*/
    }
    40%{
        transform:scale(1,0.4);
    }
    50%{/*4s后结束，球将从右以0s开始运动*/
        transform:scale(1,0.8);/*当球运动4s时柱子高度变成原来的0.8倍*/
    }
    90%{
        transform:scale(1,0.8);
    }
    100%{
        transform:scale(1,0.4);
    }
}

@keyframes barUp3{/*第三条柱子*/
    0%{/*从左开始运动*/
        transform:scale(1,0.6);/*当球运动4s内时柱子高度为原来的0.6倍*/
    }             
    100%{
        transform:scale(1,0.6);
    }
}

@keyframes barUp4{/*第四条柱子*/
    0%{/*从左开始运动*/
        transform:scale(1,0.8);/*当球运动4s内时柱子高度为原来的0.8倍*/
    }
    40%{
        transform:scale(1,0.8);
    }
    50%{/*4s后结束，球将从右以0s开始运动*/
        transform:scale(1,0.4);/*当球运动4s时柱子高度变成原来的0.4倍*/
    }
    90%{
        transform:scale(1,0.4);
    }
    100%{
        transform:scale(1,0.8);/*当球运动4s时柱子高度为原来的0.8倍*/
    }
}


@keyframes barUp5{/*第五条柱子*/
    0%{/*从左开始运动*/
        transform:scale(1,1);/*当球运动4s内时柱子高度为原来的高度*/
    }
    40%{
        transform:scale(1,1);
    }
    50%{/*4s后结束，球将从右以0s开始运动*/
        transform:scale(1,0.2);/*当球运动4s时柱子高度变成原来的0.2倍*/
    }
    90%{
        transform:scale(1,0.2);
    }
    100%{
        transform:scale(1,1);/*当球运动4s时柱子高度为原来的高度*/
    }
}

效果图