标签：webkit 背景 order 全局 取数 控制 infinite send origin
1，最少转一圈处理，设置两个全局变量记录最短翻转时间（翻转一圈的时间），另一个变量记录请求是否返回，两者均满足的时候停止动画就达到了控制动画最少翻转一圈的效果。
function getData(){// 获取数据函数 window.isRes = false;//全局变量是否返回 window.isEndSmallTime = false;//全局变量最小时间是否结束 $.getAjax({ url:‘‘, data:{}, success:function(){ window.isRes = true; if(window.isEndSmallTime && window.isRes){ doResult(); // 结果处理（停止动画） } } }); } /** * 停止翻转最小时间设定 */ setSmallRollTime:function(target){ var me = this; var smallTimer = setTimeout(function(){//最短翻转时间 1秒 window.isEndSmallTime = true; if(window.isEndSmallTime && window.isRes){ doResult(); // 结果处理（停止动画） } },1000); },
2，光环缩放的效果
@-webkit-keyframes twinkling{ /*光环缩放*/
0%,100%{
-webkit-transform:scale(1);
transform-origin:center;
}
50%{
-webkit-transform:scale(1.4);
transform-origin:center;
}
}
.twinkling{
-webkit-animation:twinkling 2s infinite 0.9s ease-in-out alternate;
animation:twinkling 2s infinite 0.9s ease-in-out alternate;
}
3，border太粗的情况渐变划线
（1）横向划线
background: -webkit-gradient(linear, left top, right top, from(rgba(255,255,255,0.4)), to(rgba(255,255,255,0.4))) left bottom; background-size: 100% 0.01rem; background-repeat: repeat-x;
（2）竖向划线
background: -webkit-gradient(linear, right top, right bottom, from(rgba(67,31,152,0.4)), to(rgba(67,31,152,0.4))) right bottom; background-size:0.01rem 100%; background-repeat: repeat-y;
4，设置节点本身颜色（背景色，透明度，字体色等）相关的变量（避免影响子元素）使用rgba（）
标签：webkit 背景 order 全局 取数 控制 infinite send origin
原文地址：http://www.cnblogs.com/weilantiankong/p/6253200.html
