图片看的效果真是不行,还是戳下面网址看吧
在线示例:http://liyunpei.xyz/loading.html
十七、效果十七
三个小球,纵向居中,间距撑开,依次改变小球的 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;
- }
今天的分享结束,明天周五,再来一波,撒花完结
来源: http://www.cnblogs.com/smallcool/p/7161240.html