css3教程_11种炫酷的纯CSS3 Loading指示器动画特效

简要的css3教程,有些学者可能不是很了解，下面小编教你学会css3教程动画特效的方法。

　　SpinKit是一组效果非常酷的纯CSS3 Loading指示器动画特效。这组loading指示器共有11种不同的效果。它通过硬件加速来制作平滑的CSS3动画过渡效果。通过它你可以制作出非常炫酷的页面loading效果。

　　安装
　　可以通过bower或nmp来安装该loading指示器：
$ bower install spinkit
$ npm install spinkit


　　使用方法
　　使用SCSS文件
　　如果你使用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')) {
// 回退方法...
}
 
以上就是css3教程动画特效的内容，了解更多相关资讯或视频教程欢迎进入课课家查询详情。