首页 > > 网页制作 > css >

CSS3-loading动画（五）

2018-06-24 01:37:09来源：未知 阅读 ()

新老客户大回馈,云服务器低至5折

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来实现的。

 

完结撒花~过周末~

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：CSS快速入门

下一篇：html 语义化标签拾遗

相关文章

IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设

网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源

网站联盟： 联盟新闻 联盟介绍 联盟点评 网赚技巧

行业资讯： 搜索引擎 网络游戏 电子商务 广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护

软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识： 网络协议 网络安全 网络管理 组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条
最新资讯
热门关注
热门标签