纯css3 加载loading动画特效
2016-11-23 10:23
429 查看
最近项目中要实现当页面还没有加载完给用户提示正在加载的loading，本来是想做个图片提示的，但是图片如果放大电脑的分辨率就会感觉到很虚，体验效果很不好。于是就采用css3+js实现这个loading的动画效果，最终在我们前端工程师的帮助之下完成。所以记录在这里，如果感兴趣的朋友也可以看看，大家互相焦炉学习。
1、demo.html
2、loaders.css
3、效果图
1、demo.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./loaders.css">
<title>纯css3 加载loading动画特效</title>
</head>
<body>
<style>
body{width:100%;height:100%;margin:0;}
.fuceng{position:absolute;width:100%;height:100%;margin:0;}
.loading{margin-left: 50%; margin-top:20%;}
</style>
<div>
<div class="fuceng">
<div class="loading">
<div class="loader-inner line-spin-fade-loader">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
</body>
</html>2、loaders.css
/**
*
* All animations must live in their own file
* in the animations directory and be included
* here.
*
*/
/**
* Styles shared by multiple animations
*/
/**
*/
.ball-spin-fade-loader {
position: relative; }
.ball-spin-fade-loader > div:nth-child(1) {
top: 25px;
left: 0;
-webkit-animation: ball-spin-fade-loader 1s 0s infinite linear;
animation: ball-spin-fade-loader 1s 0s infinite linear; }
.ball-spin-fade-loader > div:nth-child(2) {
top: 17.04545px;
left: 17.04545px;
-webkit-animation: ball-spin-fade-loader 1s 0.12s infinite linear;
animation: ball-spin-fade-loader 1s 0.12s infinite linear; }
.ball-spin-fade-loader > div:nth-child(3) {
top: 0;
left: 25px;
-webkit-animation: ball-spin-fade-loader 1s 0.24s infinite linear;
animation: ball-spin-fade-loader 1s 0.24s infinite linear; }
.ball-spin-fade-loader > div:nth-child(4) {
top: -17.04545px;
left: 17.04545px;
-webkit-animation: ball-spin-fade-loader 1s 0.36s infinite linear;
animation: ball-spin-fade-loader 1s 0.36s infinite linear; }
.ball-spin-fade-loader > div:nth-child(5) {
top: -25px;
left: 0;
-webkit-animation: ball-spin-fade-loader 1s 0.48s infinite linear;
animation: ball-spin-fade-loader 1s 0.48s infinite linear; }
.ball-spin-fade-loader > div:nth-child(6) {
top: -17.04545px;
left: -17.04545px;
-webkit-animation: ball-spin-fade-loader 1s 0.6s infinite linear;
animation: ball-spin-fade-loader 1s 0.6s infinite linear; }
.ball-spin-fade-loader > div:nth-child(7) {
top: 0;
left: -25px;
-webkit-animation: ball-spin-fade-loader 1s 0.72s infinite linear;
animation: ball-spin-fade-loader 1s 0.72s infinite linear; }
.ball-spin-fade-loader > div:nth-child(8) {
top: 17.04545px;
left: -17.04545px;
-webkit-animation: ball-spin-fade-loader 1s 0.84s infinite linear;
animation: ball-spin-fade-loader 1s 0.84s infinite linear; }
.ball-spin-fade-loader > div {
background-color: #279fcf;
width: 15px;
height: 15px;
border-radius: 100%;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute; }
@-webkit-keyframes line-spin-fade-loader {
50% {
opacity: 0.3; }
100% {
opacity: 1; } }
@keyframes line-spin-fade-loader {
50% {
opacity: 0.3; }
100% {
opacity: 1; } }
.line-spin-fade-loader {
position: relative; }
.line-spin-fade-loader > div:nth-child(1) {
top: 20px;
left: 0;
-webkit-animation: line-spin-fade-loader 1.2s 0.12s infinite ease-in-out;
animation: line-spin-fade-loader 1.2s 0.12s infinite ease-in-out; }
.line-spin-fade-loader > div:nth-child(2) {
top: 13.63636px;
left: 13.63636px;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation: line-spin-fade-loader 1.2s 0.24s infinite ease-in-out;
animation: line-spin-fade-loader 1.2s 0.24s infinite ease-in-out; }
.line-spin-fade-loader > div:nth-child(3) {
top: 0;
left: 20px;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-animation: line-spin-fade-loader 1.2s 0.36s infinite ease-in-out;
animation: line-spin-fade-loader 1.2s 0.36s infinite ease-in-out; }
.line-spin-fade-loader > div:nth-child(4) {
top: -13.63636px;
left: 13.63636px;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-animation: line-spin-fade-loader 1.2s 0.48s infinite ease-in-out;
animation: line-spin-fade-loader 1.2s 0.48s infinite ease-in-out; }
.line-spin-fade-loader > div:nth-child(5) {
top: -20px;
left: 0;
-webkit-animation: line-spin-fade-loader 1.2s 0.6s infinite ease-in-out;
animation: line-spin-fade-loader 1.2s 0.6s infinite ease-in-out; }
.line-spin-fade-loader > div:nth-child(6) {
top: -13.63636px;
left: -13.63636px;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation: line-spin-fade-loader 1.2s 0.72s infinite ease-in-out;
animation: line-spin-fade-loader 1.2s 0.72s infinite ease-in-out; }
.line-spin-fade-loader > div:nth-child(7) {
top: 0;
left: -20px;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-animation: line-spin-fade-loader 1.2s 0.84s infinite ease-in-out;
animation: line-spin-fade-loader 1.2s 0.84s infinite ease-in-out; }
.line-spin-fade-loader > div:nth-child(8) {
top: 13.63636px;
left: -13.63636px;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-animation: line-spin-fade-loader 1.2s 0.96s infinite ease-in-out;
animation: line-spin-fade-loader 1.2s 0.96s infinite ease-in-out; }
.line-spin-fade-loader > div {
background-color: #279fcf;
width: 4px;
height: 35px;
border-radius: 2px;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
width: 5px;
height: 15px; }3、效果图
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 动感的CSS3 Loading加载文字动画特效
- 30种CSS3炫酷页面预加载loading动画特效
- load-awesome 53种纯CSS3预加载页面loading指示器动画特效
- CSS3实现Loading加载动画特效大全
- 纯css3 加载loading动画特效
- 【求解】CSS3动画loading加载
- 12种炫酷html5 svg加载loading动画特效
- 使用 CSS3 实现超炫的 Loading（加载）动画效果
- CSS3中，loading加载动画
- 2款不同样式的CSS3 Loading加载动画 附源码
- 纯css3实现的动画加载特效
- css3漏斗型Loading加载动画
- CSS3动画实现loading加载图标
- CSS3扁平化Loading动画特效
- CSS3制作加载中loading动画效果
- 使用 CSS3 实现超炫的 Loading（加载）动画效果
- html+css3实现简单加载动画，loading实现
- 整合53种纯CSS3炫酷loading指示器动画特效
- CSS3实现Loading动画特效