CSS3-loading动画（五）

CSS3-loading加载动画

在线示例demo：http://liyunpei.xyz/loading.html

之前发了四篇，二十二个效果，今天再分享六个效果，总计二十八个效果。

二十三、效果二十三

两个正方形，初始均定位至左上（top：0；left：0；）；

一次完整运动分为四个阶段：第一个阶段，左上移动至右上，旋转90°，宽高缩小；第二个阶段，右上移动至右下，旋转180°，宽高回复；第三个阶段，右下移动至左下，旋转270°，宽高缩小；第四个阶段，左下移动至左上，旋转360°，宽高回复。

动画延迟时间差为负的半个动画时间。

{animation: party_ball 2s ease infinite;}
@keyframes party_ball {
      25% {
        -webkit-transform: scale(.5) rotateZ(90deg);
        transform: scale(.5) rotateZ(90deg);
        top: 0;
        left: 100%;
      }
      50% {
        -webkit-transform: scale(1) rotateZ(180deg);
        transform: scale(1) rotateZ(180deg);
        top: 100%;
        left: 100%;
      }
      75% {
        -webkit-transform: scale(.5) rotateZ(270deg);
        transform: scale(.5) rotateZ(270deg);
        top: 100%;
        left: 0;
      }
      100% {
        -webkit-transform: scale(1) rotateZ(360deg);
        transform: scale(1) rotateZ(360deg);
        top: 0;
        left: 0;
      }
    }

二十四、效果二十四

类似于火焰的跳动效果，将三个方形div定位至横向居中，纵向底部，初始宽高均设为0。

向上移动的同时，改变方形的宽高即可。

{animation: fire_ball 1.5s linear infinite;}
@keyframes fire_ball {
      50% {
        height: 30px;
        width: 30px;
        top: 50%;
      }
      100% {
        height: 0;
        width: 0;
        top: 0;
      }
    }

二十五、效果二十五

很像小时候玩的游戏——吃豆人

左侧吃豆人的制作：两个div宽高为0，只设置边框，将右边框的颜色属性设置为transparent，代码及效果如下：

.pac_head {
      border: 25px solid #fff;
      border-right-color: transparent;
      border-radius: 50%;
    }

吃豆人的嘴已经做出来了，剩下的，两个div一个正向Z轴旋转，一个反向Z轴旋转，便做出来了吃的动作。

右侧三个小球均定为至右侧中部，向吃豆人的嘴中运动，将小球的动画时间以及吃豆人的动画时间调整适当即可。

@keyframes pac_ball {
      100% {
        right: 55%;
      }
    }

二十六、效果二十六

会跳动的纸片

这个效果难点就在于下落变形的效果怎么做。其实很简单。首先要明白，一个正方形，只要是绕Z轴旋转90的倍数，那么看起来与原图是一模一样的，那么做这个效果就很简单了，不用再考虑给每个角都加上一个变形的效果了。

变形效果：只要改变border-radius的值就可以产生这种变形了。

@keyframes beat_ball {
      25% {
        transform: translateY(25%) rotate(22.5deg);//下落
        border-bottom-right-radius: 10%;
      }
      50% {
        border-bottom-right-radius: 100%;
        transform: translateY(50%) scale(1, 0.8) rotate(45deg)   //scale，是为了让形变看起来有弹性
      }
      75% {
        transform: translateY(25%) rotate(67.5deg)   //上升
      }
      100% {
        transform: translateY(0) rotate(90deg)        //旋转90°结束一个周期，刚好和初始状态一模一样，那就直接重复执行动画即可
      }
    }

阴影的效果就更好说了，做一个扁的椭圆出来，box-shadow加上阴影效果，适时是改变大小就OK了。

@keyframes beat_shadow {
      50%{
        transform: scale(1.25,0.8);
      }
    }

二十七、效果二十七

一个div，一个伪类就做出来了。

div负责旋转，伪类负责改变高度，各司其职就做来了。

@keyframes locker_ball {           //div旋转
      25%{
        transform: rotateZ(180deg);
      }
      50%{
        transform: rotateZ(180deg);
      }
      75%{
        transform: rotateZ(360deg);
      }
      100%{
        transform: rotateZ(360deg);
      }
    }
    @keyframes locker_ballh {     //伪类高度改变
      25%{
        height: 40px;
      }
      50%{
        height: 0;
      }
      75%{
        height: 0;
      }
      100%{
        height: 40px;
      }
    }

二十八、效果二十八

时钟的效果（我的定位好像没有定在正中间）

时钟的效果只用到一个关键帧动画就搞定了，那就是旋转360°，只要改变两个指针的动画运动时间即可。

@keyframes clock {
      100%{
        transform: rotateZ(360deg);
      }
    }

本系列动画中，有的停顿效果是通过关键帧控制从某百分比到某百分比一直保持该状态达到的；而有的则是通过运动曲线ease来实现的。

完结撒花~过周末~

posted @ 2017-07-14 18:00 凉心不古阅读(2230) 评论(2) 编辑收藏举报

凉心不古

CSS3-loading动画（五）

公告