当前位置：首页 > 网页特效 > 进度条

10种炫酷的CSS3 loading加载动画特效

分类：进度条日期：2024-05-14 点击(3) 评论(0)

简介

##### HTML结构
所有的loading效果都使用相同的HTML结构：使用section元素作为包裹元素，里面放置用于动画的div.spinner元素。各种动画效果均由div.spinner元素元素和它的:before和:after伪元素制作。

```html
<section class="mod model-1">
  <div class="spinner"></div>
</section>   
```             
#####  CSS样式
特效中为spinner元素设置了一些同于样式：宽度和高度均为50像素，相对于section绝对定位。

```html
.spinner {
  width: 50px;
  height: 50px;
  border-radius: 100%;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}           
```    
在第一种loading效果中，section的背景设置为褐色。spinner元素执行color-bubble帧动画。这个帧动画修改元素的颜色。

```html
.model-1 {
  background: #202020;
}
.model-1 .spinner {
  color: #f00;
  -webkit-animation: color-bubble 2s linear 0s infinite;
  animation: color-bubble 2s linear 0s infinite;
}       
```         
为了制作圆形光波扩展效果，这个特效中使用spinner元素的:before和:after伪元素来制作。通过spinner-bubble帧动画来修改它们的大小和透明度。

```html
.model-1 .spinner:after, .model-1 .spinner:before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 100%;
  box-shadow: 0 0 0 3px;
  -webkit-animation: spinner-bubble 1.3s linear 0s infinite;
  animation: spinner-bubble 1.3s linear 0s infinite;
  margin: auto;
  width: 10px;
  height: 10px;
  opacity: 0;
}
.model-1 .spinner:before {
  -webkit-animation: spinner-bubble 1.3s linear 2s infinite;
  animation: spinner-bubble 1.3s linear 2s infinite;
}              
```

web299.com

10种炫酷的CSS3 loading加载动画特效

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果