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

2种不可思议的纯CSS3 loading加载动画特效

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

简介

#####  HTML结构
该CSS3加载动画特效的HTML结构使用的是<div>的嵌套结构。

```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布局。

```html
.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效果。

```html
.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%;
  }
}          
```

web299.com

2种不可思议的纯CSS3 loading加载动画特效

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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