zoukankan      html  css  js  c++  java
  • animation动画兼容所有手机

    .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 */
            }
        }
  • 相关阅读:
    serialVersionUID作用
    为什么要使用SLF4J而不是Log4J
    认识Log4j
    Java解析xml文件四种方式
    数据结构之R进制转换
    栈的压入、弹出序列
    中间件学习之RMI+JDBC远端数据库的访问
    Linux程序设计综合训练之简易Web服务器
    Html5笔记之小结
    PhoneGap + Dreamweaver 5.5 无法在模拟器中打开的问题
  • 原文地址:https://www.cnblogs.com/binmengxue/p/5455076.html
Copyright © 2011-2022 走看看