CSS3炫酷页面预加载loading动画特效

PetitQ 图片/图形 2019-1-20 2.18K 0 0

这是一组效果非常炫酷的 CSS3 页面预加载 loading 动画特效。该特效共有 30 种不同的 loading 效果。所有的加载动画都是使用 CSS3 来完成，jQurey 代码只是用于隐藏加载动画。当你点击页面的任何一个地方时，loading 动画就会被隐藏。这 30 种 loading 动画分为 3 组：方形加载动画特效、圆形加载动画特效和长条形加载动画特效。每一种效果都有一个单独的页面，你可以对应查看每种效果的 CSS 代码。

HTML 结构

下面是第一种效果的制作方式。所有的 DEMO 都是使用嵌套 div 的 HTML 结构。在第一个 DEMO 中，嵌套了 4 层 div 元素，其中最里层的 div#object 是用于动画的元素。

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

```
<div id="loading">
```
```
  <div id="loading-center">
```
```
    <div id="loading-center-absolute">
```
```
      <div id="object"></div>
```
```
    </div>
```
```
  </div>
```
```
</div>
```

外层的 div 元素主要用于定位。

CSS 样式

首先要设置最外层的 div 的定位方式为固定定位方式，这样方便它里面的元素制作各种动画效果。

```
#loading{
```
```
  background-color: #bd4932;
```
```
  height: 100%;
```
```
  width: 100%;
```
```
  position: fixed;
```
```
  z-index: 1;
```
```
  margin-top: 0px;
```
```
  top: 0px;
```
```
}
```

接着分别设置第二层和第三层 div 元素。第二层 div 元素设置为相对定位，宽度和高度均为 100%。第三层 div 是实际动画元素的包裹元素，它设置为绝度定位，并且位置居中。

```
#loading-center{
```
```
  width: 100%;
```
```
  height: 100%;
```
```
  position: relative;
```
```
}
```
```
#loading-center-absolute {
```
```
  position: absolute;
```
```
  left: 50%;
```
```
  top: 50%;
```
```
  height: 200px;
```
```
  width: 200px;
```
```
  margin-top: -100px;
```
```
  margin-left: -100px;
```
```
}
```

最后，使用 keyframes 帧动画使 div#object 元素动起来，@-webkit-keyframes animate 是为了兼容 webkit 内核的浏览器。@keyframes animate 则是为了兼容 IE 浏览器。

```
#object{
```
```
  width: 80px;
```
```
  height: 80px;
```
```
  background-color: #FFF;
```

  -webkit-animation: animate 1s infinite ease-in-out;

  animation: animate 1s infinite ease-in-out;

```
  margin-right: auto;
```
```
  margin-left: auto;
```
```
  margin-top: 60px;
```
```
}
```
```
@-webkit-keyframes animate {
```

  0% { -webkit-transform: perspective(160px); }

  50% { -webkit-transform: perspective(160px) rotateY(-180deg); }

  100% { -webkit-transform: perspective(160px) rotateY(-180deg) rotateX(-180deg); }

```
}
```
```
 
```
```
@keyframes animate {
```
```
  0% { 
```

    transform: perspective(160px) rotateX(0deg) rotateY(0deg);

    -webkit-transform: perspective(160px) rotateX(0deg) rotateY(0deg);

```
  } 50% { 
```

    transform: perspective(160px) rotateX(-180deg) rotateY(0deg);

    -webkit-transform: perspective(160px) rotateX(-180deg) rotateY(0deg) ;

```
  } 100% { 
```

    transform: perspective(160px) rotateX(-180deg) rotateY(-180deg);

    -webkit-transform: perspective(160px) rotateX(-180deg) rotateY(-180deg);

```
  }
```
```
}
```

JAVASCRIPT

插件中还使用了一些 jQuery 代码来隐藏 loading 效果。

```
$(window).load(function() {
```

  $("#loading-center").click(function() {

```
  $("#loading").fadeOut(500);
```
```
  })    
```
```
});
```

在实际应用中，你可能需要这样使用这些 Loading 效果：

```
$(window).load(function() {
```
```
   $("#loading").fadeOut(500);
```
```
})
```

上面的代码表示在页面加载完成之后 0.5 秒的时间内将 loading 动画淡入淡出隐藏起来。

CSS3 炫酷页面预加载 loading 动画特效

已有 545 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

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

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

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

图片/图形

CSS3炫酷页面预加载loading动画特效

HTML 结构

CSS 样式

JAVASCRIPT

CSS3 炫酷页面预加载 loading 动画特效

相关文章

CSS3 鼠标悬停图文展示动画特效

响应式弹出层图片画廊jQuery插件

仿Apple TV海报背景视觉差特效

发表回复取消回复

热销模板

图片/图形

HTML 结构

CSS 样式

JAVASCRIPT

CSS3 炫酷页面预加载 loading 动画特效

相关文章

发表回复 取消回复

热销模板

发表回复取消回复