码迷,mamicode.com
首页 > 其他好文 > 详细

项目动画处理

时间:2017-01-05 18:41:12      阅读:139      评论:0      收藏:0      [点我收藏+]

标签: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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!