需求:用静态loading图(下图一)实现loading动画(下图二)
分析
1、方法一:最简单的方法是叫UI大大给一个gif图,或者自己动手利用ps帧动画制作一个gif图
2、方法二:利用css3的animation属性实现 (animation语法)
// html --> 页面上直接引入静态的png格式的loading图
<img src="../assets/img/loading.png" alt="loading">
// css --> 给img设置样式让其转起来
img {
width: .7rem;
height: .72rem;
// 调用动画loadingRotate
animation:loadingRotate 1s infinite linear;
-moz-animation:loadingRotate 1s infinite linear; /* 兼容 Firefox */
-webkit-animation:loadingRotate 1s infinite linear; /* 兼容 Safari and Chrome */
-o-animation:loadingRotate 1s infinite linear; /* 兼容 Opera */
// 定义动画loadingRotate
@keyframes loadingRotate {
from { // 动画开始状态
transform: translate(-50%, -50%) rotate(0);
}
to { // 动画结束状态
transform: translate(-50%, -50%) rotate(360deg);
}
};
@-webkit-keyframes loadingRotate { /* 兼容 Safari and Chrome */
from {
transform: translate(-50%, -50%) rotate(0);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
};
@-moz-keyframes loadingRotate { /* 兼容 Firefox */
from {
transform: translate(-50%, -50%) rotate(0);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
};
@-o-keyframes loadingRotate { /* 兼容 Opera */
from {
transform: translate(-50%, -50%) rotate(0);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
};
}