css3 loading加载图文实例

CSS3应用范围越来越广，特别是在如今谷歌浏览器逐步替代IE的情况下

今天特意给大家推荐一款css3 loading加载效果

当然，他并不是纯CSS3的，抱歉标题可能会有些歧义，但是偶尔的一点点的js也是可以忽略的啦

附件提供了28个不同的加载效果，你可以任选一种作为你的手机网页端部分模块的加载效果，而不需要考虑兼容性的问题

使用方法：

1，将头中的CSS样式以及JS引入到你的网页中

2，选择一个你喜欢的加载效果，复制其中的HTML到你的网页中即可

（注意的index.html底部的JS别漏掉了）

十七、效果十七

 

三个小球，纵向居中，间距撑开，依次改变小球的translateY的值即可。

@keyframes leap_ball {  50% {
        transform: translateY(60px);
      }}

十八、效果十八

 

三个小球，横纵方向上均居中，通过外边距撑开小球之间的距离，从效果上看是左右两边的两个小球在围绕中间小球做环绕运动，那么我们可以直接让小球的父元素来旋转，来达到两边小球的环绕效果（父元素旋转的时候，因为圆形，所以中间小球看不出是在旋转，并且中间的位置也不会改变，从视觉上看，中间小球没有做任何变化）。

@keyframes wind_ball {  50% {
        transform: rotateZ(180deg);
      }  100% {transform: rotateZ(360deg);
      }}

十九、效果十九

 

一共五个小球，每一个小球执行的动画都一样，只是每个小球的动画延迟时间不同，而使小球的位置不同，将五个小球定位至同一个位置作为统一起点（这里，我是将五个小球统一定位至最右边）

{animation: cool_ballP 2s linear infinite, cool_ballS 2s linear infinite;}@keyframes cool_ballP {  80% {
        right: 75%;    //到达终点，开始返回起点      }}
@keyframes cool_ballS {  80% {               //到达终点
        top: 25%;width: 20px;height: 20px;
      }  81% {               //开始返回起点，长度变大，宽度变小，模拟移动产生的形变top: 0;width: 25px;height: 15px;
      }  99% {               //到达起点top: 0;width: 25px;height: 15px;
      }   100% {             //恢复初始width: 20px;height: 20px;
      } 
    }

二十、效果二十

 

共八个小球，定位围成一个圆，改变小球的宽度、高度即可（要保持小球改变的是以小球的圆心为基准）

{animation: load_ball 1.6s linear infinite;}@keyframes load_ball {  50% {
        height: 0;width: 0;
      }  80% {height: 0;width: 0;
      }}

（50%-80%小球维持宽度、高度保持0，形成了一半显示，一半隐藏的效果）

二十一、效果二十一

 

一共三个小球，每个小球的运动轨迹依然是相同的，这里，我将三个小球的中心定位到纵向顶部，横向中心，然后分三个阶段，先运动到右下角，再到左下角，最后返回起点。

（在每一个阶段接近中间的时间点，加上了透明度的改变）

@keyframes triangle_ball {  16% {
        opacity: .6;
      }  33% {left: 100%;top: 100%;opacity: 1;
      }  50% {opacity: .6;
      }  66% {left: 0;top: 100%;opacity: 1;
      }  83% {opacity: .6;
      }  99% {top: 0;left: 50%;opacity: 1;
      }}

二十二、效果二十二

这类似于一个旋转的齿轮，关键是如何做出一个齿轮的形状来，一个div给实现边框做里面的圆，给div的伪类虚线边框做外面的锯齿，伪类的边框越宽，锯齿越稀松，反之，越密集。

做出来齿轮了，就剩下旋转的小case了。

.gear_ball {  height: 60px;  width: 60px;  border-radius: 50%;  display: inline-block;  border: 4px #fff solid;  position: relative;
    }.gear_ball:after {  content: '';  position: absolute;  width: 60px;  height: 60px;  border-radius: 50%;  top: -8px;  left: -8px;  border: 8px #fff dashed;
    }

以上是css3 loading加载图文实例的详细内容。更多信息请关注PHP中文网其他相关文章！