animation动画兼容所有手机

最新推荐文章于 2021-08-03 19:50:30 发布

weixin_30909575

最新推荐文章于 2021-08-03 19:50:30 发布

阅读量970

点赞数

文章标签：移动开发

原文链接：http://www.cnblogs.com/binmengxue/p/5455076.html

版权

.canvasAnim{
        position: absolute;
        width:240px;
        height:240px;
        top:0;
        z-index:60;
        top:-20px;
        left:-5px;
        border-radius:120px;
        background:-moz-linear-gradient(top, #198bc9, rgba(255, 255, 255, 0.5));  
        background:-webkit-gradient(linear, 0 0, 0 bottom, from(#198bc9), to(rgba(255,255,255, 0.5)));  
        background:-o-linear-gradient(top, #198bc9, rgba(255, 255, 255, 0.5)); 
        animation: myfirst 1s infinite linear;
        -webkit-animation:myfirst 1s infinite linear;
        -o-animation:myfirst 1s infinite linear;
    }
    @keyframes myfirst{
        0{  
            transform: rotate(0deg);    /* for Chrome || Safari */
            -moz-transform: rotate(0deg);       /* for Firefox */
            -o-transform: rotate(0deg);         /* for Opera */
        }
        100%{ 
             -webkit-transform: rotate(360deg);    /* for Chrome || Safari */
             -moz-transform: rotate(360deg);       /* for Firefox */
             -o-transform: rotate(360deg);         /* for Opera */
        }
    }
    @-webkit-keyframes myfirst{
       0{  
           -webkit-transform: rotate(0deg);    /* for Chrome || Safari */
            -moz-transform: rotate(0deg);       /* for Firefox */
            -o-transform: rotate(0deg);         /* for Opera */
        }
        100%{ 
          -webkit-transform: rotate(360deg);    /* for Chrome || Safari */
          -moz-transform: rotate(360deg);       /* for Firefox */
          -o-transform: rotate(360deg);         /* for Opera */
        }
    }
    @-o-keyframes myfirst{
       0{  
           -webkit-transform: rotate(0deg);    /* for Chrome || Safari */
            -moz-transform: rotate(0deg);       /* for Firefox */
            -o-transform: rotate(0deg);         /* for Opera */
        }
        100%{ 
          -webkit-transform: rotate(360deg);    /* for Chrome || Safari */
          -moz-transform: rotate(360deg);       /* for Firefox */
          -o-transform: rotate(360deg);         /* for Opera */
        }
    }