1 圆点渐入渐出
要点: 缩放和透明度的变化, 循环变化
- <div class="demo1"></div>
- .demo1{
- width: 40px;
- height: 40px;
- margin: 0 auto;
- border-radius: 100px;
- background-color: red;
- opacity: 1;
- animation: fadeIn 1s infinite ease-in-out;
- }
- @-webkit-keyframes fadeIn{
- from{
- transform: scale(0);
- }
- to{
- transform: scale(1);
- opacity: 0;
- }
- }
- @keyframes fadeIn{
- from{
- transform: scale(0);
- }
- to{
- transform: scale(1);
- opacity: 0;
- }
- }
2 线条 loading 图
要点: 使用缩放实现线条的高度的变化, 循环变化, 使用 animation-delay 的负值实现动画的连续变化 (负值: 动画立即执行, 从设置的值之后开始执行动画, 比如是 - 1s, 表示从动画的 1s 之后开始执行, 前一秒的动画直接跳过, 不执行)
- html
- <div class="demo2">
- <div class="line1"></div>
- <div class="line2"></div>
- <div class="line3"></div>
- <div class="line4"></div>
- <div class="line5"></div>
- </div>
- CSS
- .demo2 div{
- width: 3px;
- height: 20px;
- margin-right: 2px;
- display: inline-block;
- background-color: green;
- animation: loading 1.2s infinite ease-in-out;
- }
- .demo2 .line2{
- animation-delay: -1.1s;
- }
- .demo2 .line3{
- animation-delay: -1s;
- }
- .demo2 .line4{
- animation-delay: -0.9s;
- }
- .demo2 .line5{
- animation-delay: -0.8s;
- }
- @keyframes loading{
- 0%,40%,100%{
- transform: scaleY(.4);
- }
- 20%{
- transform: scaleY(1);
- }
- }
- @-webkit-keyframes loading{
- 0%,40%,100%{
- transform: scaleY(.4);
- }
- 20%{
- transform: scaleY(1);
- }
- }
3 旋转圆圈 loading
要点: 利用边框颜色实现, 实现一个圆有一个边的颜色不一样, 然后让元素一直循环旋转;
- <div class="dem3"></div>
- .demo3{
- width: 100px;
- height: 100px;
- border: 3px solid #eee;
- border-left-color: #fff;
- margin: 100px auto;
- border-radius: 100px;
- animation: loading1s infinite linear;
- }
- @keyframes loading{
- from{
- transform: rotate(0deg);
- }
- to{
- transform: rotate(360deg);
- }
- }
来源: http://www.bubuko.com/infodetail-3003710.html