文章导航

CSS3加载等待动画效果

2018-7-23 09:58| 作者: antzone| 查看: 1410| 评论: 0|来自: 蚂蚁部落

分享一段代码实例,它实现了动态加载等待效果。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div.animate {
  width:500px;
  height:300px;
  margin:10px;
  border:2px solid #000;
  background-color:#fff;
  position:relative;
}
div.animate > div.animate-row {
  width:400px;
  height:100px;
  margin:0px 50px 0px 50px;
  position:absolute;
  top:100px;
  left:0;
}
div.animate > div.animate-row > div.behaviour {
  width: 50px;
  height: 100%;
  margin: 0 25px 0 25px;
  float: left;
  background-color: #000;
  animation: Change 2s infinite ease-out;
  position: relative;
  background-color: #ccc;
}
div.animate > div.animate-row > div.beha2 {
  animation-delay: 0.25s;
}
div.animate > div.animate-row > div.beha3 {
  animation-delay: 0.50s;
}
div.animate > div.animate-row > div.beha4 {
  animation-delay: 0.75s;
}
@keyframes Change {
  from {
    height: 100%;
    top: 0;
    background-color:#ccc;
  }
  50% {
    height: 200%;
    top: -50%;
    background-color:#000;
  }
  to {
    height: 100%;
    top: 0;
    background-color:#ccc;
  }
}
</style>
</head>
<body>
<div class="animate">
  <div class="animate-row">
    <div class="behaviour beha1"></div>
    <div class="behaviour beha2"></div>
    <div class="behaviour beha3"></div>
    <div class="behaviour beha4"></div>
  </div>
</div>
</body>
</html>

上面的代码实现了我们的要求,下面介绍一下它的实现过程。

一.代码注释:

[CSS] 纯文本查看 复制代码
div.animate {
  width:500px;
  height:300px;
  margin:10px;
  border:2px solid #000;
  background-color:#fff;
  position:relative;
}

设置容器元素的相关样式。

宽度和长度分别为500px和300px。

外边距为10px,边框宽度为2px。

设置相对定位可以使其能够成为定位子元素的定位参考元素。

[CSS] 纯文本查看 复制代码
div.animate > div.animate-row {
  width:400px;
  height:100px;
  margin:0px 50px 0px 50px;
  position:absolute;
  top:100px;
  left:0;
}

这是动画元素的第一级父元素。

并且将其设置在父元素中的垂直水平居中。

[CSS] 纯文本查看 复制代码
div.animate > div.animate-row > div.behaviour {
  width: 50px;
  height: 100%;
  margin: 0 25px 0 25px;
  float: left;
  background-color: #000;
  animation: Change 2s infinite ease-out;
  position: relative;
  background-color: #ccc;
}

设置动画元素的样式。

宽度是50px,高度是100%(那么默认就是100px)。

同时设置其为无限循环动画模式。

[CSS] 纯文本查看 复制代码
div.animate > div.animate-row > div.beha2 {
  animation-delay: 0.25s;
}
div.animate > div.animate-row > div.beha3 {
  animation-delay: 0.50s;
}
div.animate > div.animate-row > div.beha4 {
  animation-delay: 0.75s;
}

设置元素动画的延迟时间,这很好理解,因为元素伸缩动画是依次执行的。

[CSS] 纯文本查看 复制代码
@keyframes Change {
  from {
    height: 100%;
    top: 0;
    background-color:#ccc;
  }
  50% {
    height: 200%;
    top: -50%;
    background-color:#000;
  }
  to {
    height: 100%;
    top: 0;
    background-color:#ccc;
  }
}

动画分两个过程,首先是伸长,然后是收缩。

上面的代码恰好就实现了此功效。

高度变为200%,top值变为-50%是为了保持元素垂直居中。

二.相关阅读:

(1).animation可以参阅CSS3 animation一章节。

(2).animation-delay可以参阅CSS3 animation-delay一章节。

(3).@keyframes可以参阅CSS3 @keyframes一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部