CSS3仿Windows phone加载动画特效

PetitQ Tab选项卡 2019-1-25 1.74K 0 0

这是一款使用纯 CSS3 来制作的 Windows phone loading 加载动画特效。该 loading 动画特效使用 CSS3 animation 属性，通过设置不同的延迟时间来达到 loading 动画的效果。

HTML 结构

该 loading 动画特效使用一组元素来制作 loading 指示器的小圆点。

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

```

```
```

```
```

```
```

```
```

```
```

```

CSS 样式

在 CSS 样式中，通过 span[class*="l-"]选择器来选择所有的 loading 圆点。它们被显示为 inline-block，并制作为圆形。每一个小圆点都使用指定贝兹曲线的过渡动画，同时还指定了它们的 animation-fill-mode 为 both。animation-fill-mode 属性用于指定在 animation 动画之外的时间里动画如何执行。它的取值有：none，forwards，backwards 和 both。forwards 属性会在 animation 动画结束之后继续执行最后一次迭代的动画。backwards 属性会在 animation 动画开始之前执行第一次迭代的动画。both 表示的是 forwards 属性和 backwards 属性的组合。

```
span[class*="l-"] {
```
```
  height: 4px; width: 4px;
```
```
  background: #000;
```
```
  display: inline-block;
```
```
  margin: 12px 2px;
```
```
 
```
```
  border-radius: 100%;
```
```
  -webkit-border-radius: 100%;
```
```
  -moz-border-radius: 100%;
```
```
 
```

  -webkit-animation: loader 4s infinite;

  -webkit-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);

```
  -webkit-animation-fill-mode: both;
```
```
  -moz-animation: loader 4s infinite;
```

  -moz-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);

```
  -moz-animation-fill-mode: both;
```
```
  -ms-animation: loader 4s infinite;
```

  -ms-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);

```
  -ms-animation-fill-mode: both;
```
```
  animation: loader 4s infinite;
```

  animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);

```
  animation-fill-mode: both;
```
```
}
```
```
@-webkit-keyframes loader {
```

  0% {-webkit-transform: translateX(-30px); opacity: 0;}

```
  25% {opacity: 1;}
```

  50% {-webkit-transform: translateX(30px); opacity: 0;}

```
  100% {opacity: 0;}
```
```
}
```
```
 
```
```
@-moz-keyframes loader {
```

  0% {-moz-transform: translateX(-30px); opacity: 0;}

```
  25% {opacity: 1;}
```

  50% {-moz-transform: translateX(30px); opacity: 0;}

```
  100% {opacity: 0;}
```
```
}
```
```
 
```
```
@-keyframes loader {
```

  0% {-transform: translateX(-30px); opacity: 0;}

```
  25% {opacity: 1;}
```

  50% {-transform: translateX(30px); opacity: 0;}

```
  100% {opacity: 0;}
```
```
}
```
```
 
```
```
@-ms-keyframes loader {
```

  0% {-ms-transform: translateX(-30px); opacity: 0;}

```
  25% {opacity: 1;}
```

  50% {-ms-transform: translateX(30px); opacity: 0;}

```
  100% {opacity: 0;}
```
```
}
```

最后为每一个小圆点设置不同的动画延迟时间。

span.l-1 {-webkit-animation-delay: 1s;animation-delay: 1s;-ms-animation-delay: 1s;-moz-animation-delay: 1s;}

span.l-2 {-webkit-animation-delay: 0.8s;animation-delay: 0.8s;-ms-animation-delay: 0.8s;-moz-animation-delay: 0.8s;}

span.l-3 {-webkit-animation-delay: 0.6s;animation-delay: 0.6s;-ms-animation-delay: 0.6s;-moz-animation-delay: 0.6s;}

span.l-4 {-webkit-animation-delay: 0.4s;animation-delay: 0.4s;-ms-animation-delay: 0.4s;-moz-animation-delay: 0.4s;}

span.l-5 {-webkit-animation-delay: 0.2s;animation-delay: 0.2s;-ms-animation-delay: 0.2s;-moz-animation-delay: 0.2s;}

span.l-6 {-webkit-animation-delay: 0;animation-delay: 0;-ms-animation-delay: 0;-moz-animation-delay: 0;}

CSS3 仿 Windows phone 加载动画特效

已有 436 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

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

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

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

Tab选项卡

CSS3仿Windows phone加载动画特效

HTML 结构

CSS 样式

CSS3 仿 Windows phone 加载动画特效

相关文章

炫酷Bootstrap美化Tabs选项卡特效

易于使用jQuery Tabs选项卡插件

Bootstrap Tabs 选项卡美化设计

发表回复取消回复

热销模板

Tab选项卡

HTML 结构

CSS 样式

CSS3 仿 Windows phone 加载动画特效

相关文章

发表回复 取消回复

热销模板

发表回复取消回复