css函数写个loading动画 | css预编译scss使用

效果如下 

如果你已经下载了scss的依赖，那么看二

 一.  vueCli使用scss，安装依赖

npm方式
npm install -D sass sass-loader
yarn方式
yarn add -D sass sass-loader

# 使用 npm 安装
npm install sass

# 或使用 yarn 安装
yarn add sass

二.  styles里新建一个style.scss文件 

 在main.js文件中导入样式文件style.scss

在要用的页面写好视图部分

 <div class="loading">
 <div class="loading_item"></div>
  <div class="loading_item"></div>
   <div class="loading_item"></div>
    <div class="loading_item"></div>
   <div class="loading_item"></div>
 <div class="loading_item"></div>
 </div>

style.scss页面粘贴如下代码 

.loading{
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  &_item{
    width: 20px;
    margin-right: 20px;
    background: green;
    border-radius: 15px;
     animation: loading 1s linear infinite;
                           //线性，一直重复
  }
}
/* 高度依次上下，颜色可以按需改*/
@keyframes loading {
    0%,100%{
       height: 100px;
       background: rgb(48, 198, 6)n;
     }
    25% { height: 80px;   background: rgb(3, 146, 3);}
    50% {  height: 40px;  background: rgb(137, 231, 83); }
    80% { height: 20px;  background: rgb(171, 223, 149);}
}
/* 1-6个for循环，依次乘0.2s */
@for $i from 1 through 6{
  .loading_item:nth-child(#{$i}){
    animation-delay: #{$i*0.2s};
  }
}

 上面参数详解 ：

 animation: loading 1s linear infinite;

loading关键帧名称,1s动画完成一个周期所需的时间,linear控制动画速度曲线,这里是匀速，infinite是循环播放

Tips:

animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;

• ‌animation-name‌：定义要绑定到选择器的关键帧名称。

• ‌animation-duration‌：定义动画完成一个周期所需的时间。

• ‌animation-timing-function‌：定义动画的速度曲线，如linear、ease、ease-in、ease-out、ease-in-out或cubic-bezier()。

• ‌animation-delay‌：定义动画开始前的等待时间。

• ‌animation-iteration-count‌：定义动画播放的次数，可以是具体的数字或infinite。

• ‌animation-direction‌：定义动画是否应该轮流反向播放，可能的值有normal、reverse、alternate、alternate-reverse。

• ‌animation-fill-mode‌：定义动画在播放之前和之后如何应用样式。

• ‌animation-play-state‌：定义动画的播放状态，可能的值有running和paused。

• 使用@keyframes规则，开发者可以定义动画的关键帧，即动画过程中的各个步骤。例如，可以定义动画的开始状态（from或0%）、中间状态（例如50%或25%）和结束状态（to或100%）。通过这种方式，开发者可以创建复杂的动画效果，使元素从一种样式逐渐变化为另一种样式。