用 CSS3 动画功能,做一个有逼格的加载动画

版权声明:本文自撰,转载先跟我说一下比较好 https://blog.csdn.net/KimBing/article/details/89084676

用 CSS3 动画功能,做一个有逼格的加载动画

在这里插入图片描述

主要用到的知识点:

参阅菜鸟教程: http://www.runoob.com/css3/css3-animations.html

  • frame
  • animation / 动画延时
  • flex

实现

HTML

<div class="loading">
    <div class="loading-1 loading-item"></div>
    <div class="loading-2 loading-item"></div>
    <div class="loading-3 loading-item"></div>
    <div class="loading-4 loading-item"></div>
</div>

说明: loading-1/2/3/4 用于区别四个不同点,loading-item 里放通用样式

CSS 重点

如果了解 less,看这个更清晰些,如果不懂,看下面生成的 css

LESS

@red: #FF3B30;
@orange: #FF9500;
@black: #373737;
@green: #4CD964;

@load-box-height: 50px;

.loading{
  height: @load-box-height; // 定死容器的高度,不然会上下浮动
  margin: 20px 0;
  display: flex;
  align-items: center; // 横向排列子元素
  justify-content: center; // 纵向排列子元素
  .loading-item{
    height: @load-box-height;
    width: 10px;
    margin-right: 10px;
    &:last-child{ // 去掉最后一个的右边距
      margin-right: 0;
    }
  }
  &-1{
  // 【参数分别为】 动画key名,一次动画的持续时间,循环方式,过滤规则,动画起始延时时间
    -webkit-animation: load-frame 1s infinite linear 0s;
    -o-animation: load-frame 1s infinite linear 0s;
    animation: load-frame 1s infinite linear 0s;
    background-color: @red;
  }
  &-2{
    -webkit-animation: load-frame 1s infinite linear 0.25s; 
    // 通过控制延时,只用一个keyframe 就能做出渐变效果
    -o-animation: load-frame 1s infinite linear 0.25s;
    animation: load-frame 1s infinite linear 0.25s;
    background-color: @orange;
  }
  &-3{
    -webkit-animation: load-frame 1s infinite linear 0.5s;
    -o-animation: load-frame 1s infinite linear 0.5s;
    animation: load-frame 1s infinite linear 0.5s;
    background-color: @black;
  }
  &-4{
    -webkit-animation: load-frame 1s infinite linear 0.75s;
    -o-animation: load-frame 1s infinite linear 0.75s;
    animation: load-frame 1s infinite linear 0.75s;
    background-color: @green;
  }
}

@keyframes load-frame {
  0% {height: @load-box-height;}
  50% {height: @load-box-height * 0.25;}
  // 设置动画中间的高度,此时为最低,为原高度的25%
  100% {height: @load-box-height;}
}

@-webkit-keyframes load-frame { // safari & chrome
  0% {height: @load-box-height;}
  50% {height: @load-box-height * 0.25;}
  100% {height: @load-box-height;}
}

CSS

.loading {
  height: 50px;
  margin: 20px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loading .loading-item {
  height: 50px;
  width: 10px;
  margin-right: 10px;
}
.loading .loading-item:last-child {
  margin-right: 0;
}
.loading-1 {
  -webkit-animation: load-frame 1s infinite linear 0s;
  -o-animation: load-frame 1s infinite linear 0s;
  animation: load-frame 1s infinite linear 0s;
  background-color: #FF3B30;
}
.loading-2 {
  -webkit-animation: load-frame 1s infinite linear 0.25s;
  -o-animation: load-frame 1s infinite linear 0.25s;
  animation: load-frame 1s infinite linear 0.25s;
  background-color: #FF9500;
}
.loading-3 {
  -webkit-animation: load-frame 1s infinite linear 0.5s;
  -o-animation: load-frame 1s infinite linear 0.5s;
  animation: load-frame 1s infinite linear 0.5s;
  background-color: #373737;
}
.loading-4 {
  -webkit-animation: load-frame 1s infinite linear 0.75s;
  -o-animation: load-frame 1s infinite linear 0.75s;
  animation: load-frame 1s infinite linear 0.75s;
  background-color: #4CD964;
}
@keyframes load-frame {
  0% {height: 50px;}
  50% {height: 12.5px;}
  100% {height: 50px;}
}
@-webkit-keyframes load-frame {
  0% {height: 50px;}
  50% {height: 12.5px;}
  100% {height: 50px;}
}

最后,WA-LA,完成

在这里插入图片描述

展开阅读全文

没有更多推荐了,返回首页