C3 -- 如何用静态loading.png实现loading动画

需求:用静态loading图(下图一)实现loading动画(下图二)

静态loading图
loading动画

分析
1、方法一:最简单的方法是叫UI大大给一个gif图,或者自己动手利用ps帧动画制作一个gif图
2、方法二:利用css3的animation属性实现 (animation语法)
// html --> 页面上直接引入静态的png格式的loading图
<img src="../assets/img/loading.png" alt="loading">

// css  --> 给img设置样式让其转起来
img {
	 width: .7rem;
     height: .72rem;
     
     // 调用动画loadingRotate 
     animation:loadingRotate 1s infinite linear;
     -moz-animation:loadingRotate 1s infinite linear;      /* 兼容 Firefox */
     -webkit-animation:loadingRotate 1s infinite linear;   /* 兼容 Safari and Chrome */
     -o-animation:loadingRotate 1s infinite linear;        /* 兼容 Opera */
     
     // 定义动画loadingRotate 
     @keyframes loadingRotate {
        from {      // 动画开始状态
          transform: translate(-50%, -50%) rotate(0);
        }
        to {        // 动画结束状态
          transform: translate(-50%, -50%) rotate(360deg);
        }
     };
     @-webkit-keyframes loadingRotate {                      /* 兼容 Safari and Chrome */
       from {
         transform: translate(-50%, -50%) rotate(0);
       }
       to {
         transform: translate(-50%, -50%) rotate(360deg);
       }
     };
     @-moz-keyframes loadingRotate {                          /* 兼容 Firefox */
       from {
         transform: translate(-50%, -50%) rotate(0);
       }
       to {
         transform: translate(-50%, -50%) rotate(360deg);
       }
     };
     @-o-keyframes loadingRotate {                            /* 兼容 Opera */
       from {
         transform: translate(-50%, -50%) rotate(0);
       }
       to {
         transform: translate(-50%, -50%) rotate(360deg);
       }
   };
}

阅读更多

没有更多推荐了,返回首页