更新一个css动画,加载中动画

风研雨墨

css 动画效果

动画效果1

效果如图所示

这个加载动画在其他地方看到过,不过忘了。

查看动态效果请查看

实现思路:

1. 拆分结构

    将9个立方体才分为一个进行分析,最终得出单个立方体的结构,由三个面组成,代码如下

        

li{  
          height: @boxS / 2;  
          width:@boxS;  
          display: inline-block;  
          background: @theme;  
          position: relative;  
          transform: skew(-@shape, 0deg);  
          margin: @pads;  
          box-shadow: 130px 140px 10px 0px #0000002e;  
          transition: all 1s;  
          &::after{  
            content: "";  
            height: @boxS / 2;  
            width: @boxS;  
            display: inline-block;  
            position: absolute;  
            background: darken(@theme , 10%);  
            transform: skew(0deg, @shape);  
            top: @boxS / 2;  
            left: 100%;  
          }  
  
          &::before{  
          content: "";  
          height: @boxS;  
          width: @boxS;  
          display: inline-block;  
          position: absolute;  
          background: lighten(@theme , 10%);  
          transform: skew(@shape, 0deg);  
          top: @boxS / 2;  
          left: @boxS / 2;  
          }   
        }  

2.组合结构

其三行三列的结构,在DOM上可以采用3 * 3的结构,使用标签ulli,在组合九个方块时会发现就方块时垂直排列,效果如图所示

这就是我把它Dom结构才分为3个ul的原因,直接分为f_1、f_2,f3进行操作,进行微调位置,调整完成后就有了上图图一的效果。

    

<div class="box-loading">  
        <ul class="f_1">  
            <li></li>  
            <li></li>  
            <li></li>  
        </ul>  
        <ul class="f_2">  
            <li></li>  
            <li></li>  
            <li></li>  
        </ul>  
        <ul class="f_3">  
            <li></li>  
            <li></li>  
            <li></li>  
        </ul>  
    <div>  

3.开始写动画

首先,设计图形运动轨迹,得到运动的方式,上下运动,由于运动方式采用的时transform,与之前调整单个立方体的样式有冲突,最终得出以下代码。

@keyframes  box-load-run{  
      0%{  
        transform: translate(0px , 0px) skew(-45deg, 0deg);  
      }  
  
      50% {  
        transform: translate(0px , 12px) skew(-45deg, 0deg);  
      }  
  
      100% {  
        transform: translate(0px , 0px) skew(-45deg, 0deg);  
      }  
    }  

然后,为了九个立方块运动时达到波浪运动的效果,那么需要计算一下动画的延迟与运动时间。为此,我设计了一个函数,该函数运行于 li标签下。

    

.runs(@time , @dey){  
     &:first-child{  
    animation: box-load-run @time infinite ease-in-out;  
    animation-delay: @dey * 1;  
  }  

  &:nth-child(2){  
    animation: box-load-run @time infinite ease-in-out;  
    animation-delay: @dey * 2;  
  }  

  &:last-child{  
    animation: box-load-run @time infinite ease-in-out;  
    animation-delay: @dey * 3;  
  }  
} 

参数说明:@time:运行时间 @dey:运动延迟。

为了达到比较好的动画效果,我们需要动画有来有回,平缓过度,所以采用的时ease-in-out

最后配合一个启动样式完成动画效果。

    

.f_1{  
  li{  
     .runs(1.2s , 0.1s );  
  }  
}  

.f_2{  
  li{  
    .runs(1.2s , 0.2s);  
  }  
}  

.f_3{  
   li{  
    .runs(1.2s , 0.3s );  
  }  
}  

总结

这种动画效果早已经被人写出来,但是我依然要自己实现一遍,主要目的不是为了写动画效果,而是为了巩固自己的知识点、查看自己的不足。举个例子,在写这个动画的时候自己还对less的函数不熟悉。

第一点:.runs这个函数,里面的内容仍然可以优化。使用lessfor循环。

第二点: 页面结构只需要采用一个ul标签也可以完成,配合上css的伪元素选择器、less的循环与条件语句。

第三点:作为前端开发更需要一个自己的积累,积累到一定程度一定会发生质的改变,希望能够形成自己的规范或者技术圈子,并让大家探讨。

动画效果地址:https://angular-t4cuvf.stackblitz.io/boxLoad

在此处可直接修改
点击进行代码修改

本示例使用的css预编译语言 less。

阅读 1.5k
360 声望
12 粉丝
0 条评论
360 声望
12 粉丝
文章目录
宣传栏