CSS3炫酷loading加载动画特效

PetitQ 其他代码 2019-1-20 1.65K 0 0

这是一款共 2 种炫酷效果的纯 CSS3 loading 加载动画特效。该 CSS3 加载动画分别为弹跳的小方块和月亮绕地球旋转的动画效果。它们使用的技术都是 CSS animation 来实现，效果非常的震撼。

HTML 结构

该 CSS3 加载动画特效的 HTML 结构使用的是

也想出现在这里？联系我们吧

的嵌套结构。

```
<div class='demo-container'>
```
```
  
```
```
  <div class='demo-panel bg1'>
```
```
    <div class='spinner'>
```
```
      <div class='bouncer'></div>
```
```
    </div>
```
```
  </div>
```
```
  
```
```
  <div class='demo-panel bg2'>
```
```
    <div class='spinner'>
```
```
      <div class='orbiter'>
```
```
        <div class='planet'></div>
```
```
        <div class='orbit-outer'>
```
```
          <div class='orbit-inner'>
```
```
            <div class='dot'></div>
```
```
          </div>
```
```
        </div>
```
```
      </div>
```
```
    </div>
```
```
  </div>
```
```
</div>
```

CSS 样式

在 DEMO 中的布局使用的是 CSS flex 布局。

```
.demo-container {
```
```
  display: -webkit-box;
```
```
  display: -webkit-flex;
```
```
  display: -ms-flexbox;
```
```
  display: flex;
```
```
  -webkit-flex-direction: row;
```
```
  -webkit-box-orient: horizontal;
```
```
  -webkit-box-direction: normal;
```
```
      -ms-flex-direction: row;
```
```
          flex-direction: row;
```
```
  height: 60vh;
```
```
  -webkit-align-items: center;
```
```
  -webkit-box-align: center;
```
```
      -ms-flex-align: center;
```
```
          align-items: center;
```
```
}
```
```
.demo-container .demo-panel {
```
```
  -webkit-flex-grow: 1;
```
```
  -webkit-box-flex: 1;
```
```
      -ms-flex-positive: 1;
```
```
          flex-grow: 1;
```
```
  height: 100%;
```
```
  display: -webkit-box;
```
```
  display: -webkit-flex;
```
```
  display: -ms-flexbox;
```
```
  display: flex;
```
```
  -webkit-align-items: center;
```
```
  -webkit-box-align: center;
```
```
      -ms-flex-align: center;
```
```
          align-items: center;
```
```
  -webkit-flex-direction: row;
```
```
  -webkit-box-orient: horizontal;
```
```
  -webkit-box-direction: normal;
```
```
      -ms-flex-direction: row;
```
```
          flex-direction: row;
```
```
}
```

小方块的弹跳动画使用了两组 bounce 帧动画，分别对应小方块上升和下降时的动画效果。animation 被设置为无限循环模式，并且指定了 easing 效果。

```
.bouncer {
```
```
  width: 30px;
```
```
  height: 10px;
```
```
  position: absolute;
```
```
  background: white;
```
```
  left: 35%;
```
```
  -webkit-animation-name: bounce;
```
```
  animation-name: bounce;
```
```
  -webkit-animation-duration: 2s;
```
```
  animation-duration: 2s;
```

  -webkit-animation-iteration-count: infinite;

```
  animation-iteration-count: infinite;
```

  -webkit-animation-timing-function: ease;

```
  animation-timing-function: ease;
```
```
}
```
```
@-webkit-keyframes bounce {
```
```
  0% {
```
```
    -webkit-transform: rotate(0turn);
```
```
            transform: rotate(0turn);
```
```
    bottom: 0%;
```
```
    height: 20px;
```
```
  }
```
```
  4% {
```
```
    height: 5px;
```
```
  }
```
```
  5% {
```
```
    height: 30px;
```
```
    bottom: 0%;
```

    -webkit-animation-timing-function: cubic-bezier(0, 0.62, 0.42, 1);

    animation-timing-function: cubic-bezier(0, 0.62, 0.42, 1);

```
  }
```
```
  20% {
```
```
    height: 20px;
```
```
    bottom: 50%;
```

    -webkit-animation-timing-function: cubic-bezier(0.57, 0.01, 0.98, 0.47);

    animation-timing-function: cubic-bezier(0.57, 0.01, 0.98, 0.47);

```
  }
```
```
  45% {
```
```
    height: 20px;
```
```
    bottom: 0%;
```
```
  }
```
```
  49% {
```
```
    height: 5px;
```
```
  }
```
```
  50% {
```
```
    -webkit-transform: rotate(0turn);
```
```
            transform: rotate(0turn);
```
```
    /* height: $h + 60; */
```
```
    bottom: 0%;
```

    -webkit-animation-timing-function: cubic-bezier(0, 0.62, 0.42, 1);

    animation-timing-function: cubic-bezier(0, 0.62, 0.42, 1);

```
  }
```
```
  75% {
```
```
    height: 20px;
```
```
    bottom: 100%;
```

    -webkit-animation-timing-function: cubic-bezier(0.57, 0.01, 0.98, 0.47);

    animation-timing-function: cubic-bezier(0.57, 0.01, 0.98, 0.47);

```
  }
```
```
  100% {
```
```
    -webkit-transform: rotate(1turn);
```
```
            transform: rotate(1turn);
```
```
    height: 20px;
```
```
    bottom: 0%;
```
```
  }
```
```
}
```
```
@keyframes bounce {
```
```
  0% {
```
```
    -webkit-transform: rotate(0turn);
```
```
            transform: rotate(0turn);
```
```
    bottom: 0%;
```
```
    height: 20px;
```
```
  }
```
```
  4% {
```
```
    height: 5px;
```
```
  }
```
```
  5% {
```
```
    height: 30px;
```
```
    bottom: 0%;
```

    -webkit-animation-timing-function: cubic-bezier(0, 0.62, 0.42, 1);

    animation-timing-function: cubic-bezier(0, 0.62, 0.42, 1);

```
  }
```
```
  20% {
```
```
    height: 20px;
```
```
    bottom: 50%;
```

    -webkit-animation-timing-function: cubic-bezier(0.57, 0.01, 0.98, 0.47);

    animation-timing-function: cubic-bezier(0.57, 0.01, 0.98, 0.47);

```
  }
```
```
  45% {
```
```
    height: 20px;
```
```
    bottom: 0%;
```
```
  }
```
```
  49% {
```
```
    height: 5px;
```
```
  }
```
```
  50% {
```
```
    -webkit-transform: rotate(0turn);
```
```
            transform: rotate(0turn);
```
```
    /* height: $h + 60; */
```
```
    bottom: 0%;
```

    -webkit-animation-timing-function: cubic-bezier(0, 0.62, 0.42, 1);

    animation-timing-function: cubic-bezier(0, 0.62, 0.42, 1);

```
  }
```
```
  75% {
```
```
    height: 20px;
```
```
    bottom: 100%;
```

    -webkit-animation-timing-function: cubic-bezier(0.57, 0.01, 0.98, 0.47);

    animation-timing-function: cubic-bezier(0.57, 0.01, 0.98, 0.47);

```
  }
```
```
  100% {
```
```
    -webkit-transform: rotate(1turn);
```
```
            transform: rotate(1turn);
```
```
    height: 20px;
```
```
    bottom: 0%;
```
```
  }
```
```
}
```

CSS3 炫酷 loading 加载动画特效

已有 412 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

其他代码

CSS3炫酷loading加载动画特效

HTML 结构

CSS 样式

CSS3 炫酷 loading 加载动画特效

相关文章

基于moment日期选择器jQuery插件

DOM元素平滑过渡变形动画插件

基于HTML5 SVG的炫酷进度条插件

发表回复取消回复

热销模板

其他代码

HTML 结构

CSS 样式

CSS3 炫酷 loading 加载动画特效

相关文章

发表回复 取消回复

热销模板

发表回复取消回复