icewing

简单的纯css完成加载动画效果
不是很复杂,就直接放代码了。关于代码的解释说明在后面。
扫描右侧二维码阅读全文
11
2019/05

简单的纯css完成加载动画效果

不是很复杂,就直接放代码了。关于代码的解释说明在后面。

效果图

1

HTML代码

<div class="bouncing-loader">
  <div></div>
  <div></div>
  <div></div>
</div>

CSS代码

@keyframes bouncing-loader {
  to {
    opacity: 0.1;
    transform: translate3d(0, -1rem, 0);
  }
}
.bouncing-loader {
  display: flex;
  justify-content: center;
}
.bouncing-loader > div {
  width: 1rem;
  height: 1rem;
  margin: 3rem 0.2rem;
  background: #8385aa;
  border-radius: 50%;
  animation: bouncing-loader 0.6s infinite alternate;
}
.bouncing-loader > div:nth-child(2) {
  animation-delay: 0.2s;
}
.bouncing-loader > div:nth-child(3) {
  animation-delay: 0.4s;
}

代码解释

  1. 使用 @keyframes 定义了具有两种状态的动画。
  2. 使用 opacity 改变透明度,并使用 transform: translate3d() 在二维平面上向上转换,在 transform: translate3d() 上使用单轴平移可以提高动画的性能。
  3. .bouncing-loader 是加载动画的父容器,并添加属性 display: flexjustify-content: center 将其居中。
  4. 使用 .bouncing-loader > div 设置后面三个div的样式。其中设置他们的宽高为 1rem ,并用border-radius:50% 将它们从正方形转换为圆形。
  5. 使用 margin:3rem 0.2rem 将每个div距离顶部和底部边缘设置为3rem,左和右边距为0.2rem,美化一下避免相互重叠。
  6. animation 属性是一个简写属性,用于设置六个动画属性。详细可以 查看这里
  7. nth-child(n) 用于指定其孩子元素,这里是设置第二个div和第三个div的样式。
  8. animation-delay 设置动画延迟,避免一起上下跳。有一个过度效果。

补充说明

  • 注意: 1rem 一般是 16px
最后修改:2019 年 05 月 11 日 09 : 17 PM
生活需要一些仪式感,比如手冲一杯咖啡:)

发表评论