其他代码
纯CSS3加载Loading指示器动画
PetitQ
SpinKit 是一组效果非常酷的纯 CSS3 Loading 指示器动画特效。这组 loading 指示器共有 11 种不同的效果。它通过硬件加速来制作平滑的 CSS3 动画过渡效果。通过它你可以制作出非常炫酷的页面 loading 效果。
使用方法
如果你使用 SCSS 文件，可以只引入需要的 loading 指示器，而不需要全部引入：
也想出现在这里？联系我们吧
@import '../bower_components/spinkit/scss/spinners/1-rotating-plane',
'../bower_components/spinkit/scss/spinners/3-wave';
要支持所有的浏览器，你需要使用一个 autoprefixer 文件。如果你使用 gulp 来编译 SCSS，可以使用 gulp-autoprefixer，如果你使用 grunt 来编译，可以使用 grunt-autoprefixer。使用的变量可以在 scss/_variables.scss 文件中进行修改。
浏览器兼容
所有的最新版本的现代浏览器都支持 CSS3 动画，支持 CSS animation 的浏览器占使用量的 90%。如果你需要支持 IE9 级以下的浏览器，可以使用下面的方法。loading 指示器回退方法。最简单的回退方法是通过 Modernizr 来检测浏览器是否支持 animation 属性，如果不支持的话可以将 loading 指示器更换为一张 GIF 图片。你也可以像下面这样来定义一个函数来手动检测：
function browserSupportsCSSProperty(propertyName) {
var elm = document.createElement('div');
propertyName = propertyName.toLowerCase();
if (elm.style[propertyName] != undefined)
return true;
var propertyNameCapital = propertyName.charAt(0).toUpperCase() + propertyName.substr(1),
domPrefixes = 'Webkit Moz ms O'.split(' ');
for (var i = 0; i < domPrefixes.length; i++) {
if (elm.style[domPrefixes[i] + propertyNameCapital] != undefined)
return true;
}return false;
}
然后使用它来检测浏览器是否支持 animation 属性：
if (!browserSupportsCSSProperty('animation')) {
// 回退方法...}
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
