CSS3 Animation实现加载动画-阿里云开发者社区

开发者社区> 云计算> 正文
登录阅读全文

CSS3 Animation实现加载动画

简介: 利用CSS Animation属性实现加载动画

fab41d5c7ccf17ed1d2f0014274e0280.gif

利用CSS3中的animation,可以实现很多很炫的效果。今天就来利用animation属性完成如上图所示的加载效果。

1 基本构图

首先来完成基本的构图:

2bee0c74efd3ce5a43977b569a7fac77.png

可以将上述图形解析为四部分:

  • 外部矩形
  • 左侧红色矩形
  • 右下部黄色矩形
  • 右上角白色矩形

划清图形结构后,可以完成基本页面绘制:

<style>
  div {
    box-sizing: border-box;
  }
  .logo {
    width: 250px;
    height: 250px;
    margin: 10px auto;
    position: relative;
    padding: 4px;
  }
  
  .red {
    position: absolute;
    left: 0;
    top: 0;
    width: 25%;
    height: 100%;
    background: red;
    border-right: 4px solid black;
  }


  .yellow {
    position: absolute;
    left: 25%;
    right:0;
    bottom: 0;
    height: 50%;
    background: yellow;
    border-top: 4px solid black;
  }

  .white {
    position: absolute;
    right:0;
    top: 0;
    height: 50%;
    width: 25%;
    background: white;
    border-left: 4px solid black;
  }
</style>   

<body>
  <div class="logo">
    <div class="red"></div>
    <div class="yellow"></div>
    <div class="white"></div>
  </div>
</body>

loading1.png

可以看出,外部矩形的边框并没有绘制。具体原因暂且按下不表,后面会详细介绍。

2 动画分析

首先来看下,这里的动画总共分为7部分:

  • 四边边框出现
  • 红色矩形出现
  • 黄色矩形出现
  • 白色矩形出现

后面三个矩形出现相对比较容易,难的是四个四边边框的动画效果。由于同侧边框(左右边框/上线边框)并不是同步出现,单纯靠一个矩形的伸缩无法实现,所以至少要依赖两个矩形,这时::after ::before两个元素正好可以派上用场:

.logo::before, .logo::after {
  position: absolute;
  width: 100%;
  height: 100%;
  content: '';
  border: 4px solid transparent;
  box-sizing: border-box;
}

.logo::before {
  z-index: 1; /*before在所有元素最前面,所以会被覆盖,加上z-index*/
  top: 0px;
  left: 0px;
  animation: border-before 9s infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
}

.logo::after {
  right: 0px;
  bottom: 0px;
  animation: border-after 9s infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
}

3 边框动画

接下来就可以利用关键帧来实现边框动画了:


@keyframes border-before {
  0% {
    width: 0;
    height: 0;
    border-left-color: black;
  }

  11% {
    height: 100%;
    width: 0;
    border-bottom-color: transparent; /*在25% - 50% 的过程中,boder-bottom-color变成黑色,默认是在25%-50%过程开始是执行,可以通过step设置*/
  }

  22%, 100% {
    height: 100%;
    width: 100%;
    border-left-color: black;
    border-bottom-color: black;
  }

}

@keyframes border-after {
  0%, 22% {
    width: 0;
    height: 0;
    border-top-color: transparent;
    border-right-color: transparent;
  }

  33% {
    width: 0;
    height: 100%;
    border-right-color: black;
    border-top-color: transparent;
  }

  44%, 100% {
    height: 100%;
    width: 100%;
    border-top-color: black;
    border-right-color: black;
  }

}

4 内部矩形动画

接下来内部矩形的动画,相对就更简单了:

.red {
  position: absolute;
  left: 0;
  top: 0;
  width: 25%;
  height: 100%;
  background: red;
  border-right: 4px solid black;
  animation: redmove 9s infinite;
  animation-timing-function: linear;
  animation-direction: alternate;
}

@keyframes redmove {
  0%,
  44% {
    width: 0;
    opacity: 0;
  }
  44.01% {
    opacity: 1;
  }
  55%,
  100% {
    width: 25%;
    opacity: 1;
  }
}

.yellow {
  position: absolute;
  left: 25%;
  right:0;
  bottom: 0;
  height: 50%;
  background: yellow;
  border-top: 4px solid black;
  animation: moveyellow 9s infinite;
  animation-timing-function: linear;
  animation-direction: alternate;
}

@keyframes moveyellow {
  0%, 55% {
    height: 0;
    opacity: 0;
  }

  55.01% {
    opacity: 1;
  }

  66%, 100% {
    height: 50%;
  }
}



.white {
  position: absolute;
  right:0;
  top: 0;
  height: 50%;
  width: 25%;
  background: white;
  border-left: 4px solid black;
  animation: movewhite 9s infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
}

@keyframes movewhite {
  0%, 66% {
    width: 0%;
    opacity: 0;
  }

  66.01% {
    opacity: 1;
  }

  77%, 100% {
    width: 25%;
  }
}

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
云计算
使用钉钉扫一扫加入圈子
+ 订阅

时时分享云计算技术内容,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。

其他文章