首页 > 代码库 > 项目动画处理
项目动画处理
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()
项目动画处理
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。