今天做的这个动画实现也是非常简单，简单数几行代码就可以搞定。给这个动画取了个优雅的名字--钢琴按键，也实在是想不出什么更形象的名字了。废话不多说，直接上图。

1. 先看gif图

2. 代码实现思路

2.1 定义五个方块的元素。

2.2 对方块元素使用动画，延时改变透明度。

3. 主要使用的技术

主要用到了animation动画

@-webkit-keyframes load{
　　0%{opacity:1;}
　　100%{opacity:0;}
}
.m-load2 .item{-webkit-animation:load 0.5s linear 0s infinite;}

4. 源代码

 <!DOCTYPE html>

 <html>

 <head>

 <meta http-equiv="Content-Type" Content="text/html; charset=utf-8;">

 <title>CSS3实现加载的动画效果3</title>

 <meta name="author" content="rainna" />

 <meta name="keywords" content="rainna's css lib" />

 <meta name="description" content="CSS3" />

 <style>

 *{margin:0;padding:0;}

 .m-load{background:url('load.gif') center center no-repeat;}

 .m-load,.m-load2{width:60px;height:10px;margin:100px auto;}

 /** 加载动画的静态样式 **/

 .m-load2:before,.m-load2:after,.m-load2 .item{float:left;width:10px;height:10px;margin:0 2px 0 0;background:#444;}

 .m-load2:before,.m-load2:after{content:'';}

 /** 加载动画 **/

 @-webkit-keyframes load{

     0%{opacity:1;}

     100%{opacity:0;}

 }

 .m-load2:before{-webkit-animation:load 0.5s linear 0s infinite;}

 .m-load2 .item:nth-child(1){-webkit-animation:load 0.5s linear 0.1s infinite;}

 .m-load2 .item:nth-child(2){-webkit-animation:load 0.5s linear 0.2s infinite;}

 .m-load2 .item:nth-child(3){-webkit-animation:load 0.5s linear 0.3s infinite;}

 .m-load2:after{-webkit-animation:load 0.5s linear 0.4s infinite;}

 </style>

 </head>

 <body>

 <div class="m-load"></div>

 <div class="m-load2">

     <div class="item"></div>

     <div class="item"></div>

     <div class="item"></div>

 </div>

 </body>

 </html>

CSS 实现加载动画之三-钢琴按键的更多相关文章

  1. CSS 实现加载动画之八-圆点旋转

    这篇文件介绍的动画是QQ邮箱APP里的加载动画,效果类似,但是不完全一样.实现过程不复杂,这里不详细解释了,直接上源码.另外还有一种实现方式,利用元素的3D转换加平移. 1. 先看截图 2. 源代码 ...

  2. CSS 实现加载动画之七-彩环旋转

    今天整理的这个动画估计大家都不会陌生,彩环旋转,看过之后是不是觉得很熟悉,对,这个就是优酷视频APP里面的加载动画.本人空余时间喜欢看些视频,留意到这个动画后就想用代码实现出来,今天整理了下,跟大家分 ...

  3. CSS 实现加载动画之六-大风车

    这个动画改编自光盘旋转,前几个步骤一样,最后一步不同.光盘旋转的最后一步是外层容器加个圆形的白色边框,多余部分隐藏,这个案例则是在每个旋转的子元素的顶部或底部增加一个三角形的元素,构成风车旋转的角. ...

  4. CSS 实现加载动画之五-光盘旋转

    今天做的这个动画叫光盘旋转,名字自己取的.动画的效果估计很多人都很熟悉,就是微信朋友圈里的加载动画.做过前面几个动画,发现其实都一个原理,就是如何将动画的元素如何分离出来.这个动画的实现也很简单,关键 ...

  5. CSS 实现加载动画之四-圆点旋转

    圆点旋转也是加载动画中经常用到的.其实现方式和菊花旋转一样,只不过一个是线条形式,一个是圆点形式.圆点按照固定的旋转角度排列,加上延时的改变透明度的动画就可以实现.这个实现也比较简单. 1. 动画截图 ...

  6. CSS 实现加载动画之二-圆环旋转

    上次简单的介绍了下如何用代码实现菊花旋转的加载动画,动画点击,这次继续我们的动画系列,实现另外一种加载动画,圆环旋转.与上次不同的是,菊花旋转是通过改变元素透明度来实现动画,这次因为考虑到元素叠加,加 ...

  7. CSS 实现加载动画之一-菊花旋转

    最近打算整理几个动画样式,最常见的就是我们用到的加载动画.加载动画的效果处理的好,会给页面带来画龙点睛的作用,而使用户愿意去等待.而页面中最常用的做法是把动画做成gif格式,当做背景图或是img标签来 ...

  8. 【动画消消乐】HTML+CSS 自定义加载动画 061

    前言 Hello!小伙伴! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 自我介绍ଘ(੭ˊᵕˋ)੭ 昵称:海轰 标签:程序猿|C++选手|学生 简介:因C语言结识编程,随后转入计算机专 ...

  9. 【动画消消乐】HTML+CSS 自定义加载动画：清新折叠方块效果 063（附源码及原理详解）

    前言 Hello!小伙伴! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 自我介绍ଘ(੭ˊᵕˋ)੭ 昵称:海轰 标签:程序猿|C++选手|学生 简介:因C语言结识编程,随后转入计算机专 ...

随机推荐

  1. Ruby安装

    Windows下安装ruby 先安装ruby吧 点击安装,额,咳咳什么情况,好了 人是有国籍的,但知识无国界的 是这个意思吧,选择安装语言   选择安装目录 顺便勾选上添加到环境变量吧   安装完成 ...

  2. linq扩展之动态排序

    前两天看QQ群里面,一位朋友问的问题,说在linq中怎么实现动态排序呢,自己想了半天,没有头绪,网上找了下相关的资料,看了下,收益挺多,记录下来. 之前我们没有如果不知道动态排序的方法的话,我们可能会 ...

  3. android 进程间通信---bind的前世

    在分析bind机制之前,我发现已经有一篇文章讲解的非常清晰,并且提出了很多问题. 地址:http://my.oschina.net/keeponmoving/blog/64218 一.Linux系统进 ...

  4. IE下实现打印功能

    先贴代码: <html> <head> <style type="text/css"> *{margin:0px;padding:0px;} . ...

  5. MyCat 学习笔记 第十篇.数据分片 之 ER分片

    1 应用场景 这篇来说下mycat中自带的er关系分片,所谓er关系分片即可以理解为有关联关系表之间数据分片.类似于订单主表与订单详情表间的分片存储规则. 本文所说的er分片分为两种: a. 依据主键 ...

  6. 烂泥：U盘安装Centos6.5

    本文由秀依林枫提供友情赞助,首发于烂泥行天下. 使用U盘安装Centos6.5,需要以下几个步骤: 1. 制作U盘linux系统 2. 设置服务器BIOS 3. 安装Centos,注意引导分区的安装 ...

  7. javascript 特效实现(1)——展开选项和收起效果

    知识点:javascript事件:判断当前展开收起状态:延迟执行setTimeout方法. 1.简单的展开和收起效果: 1.1 静态结构HTML代码分析 body包含最外层的div id=" ...

  8. Linux系统升级更新openssh 7.3p1

    放在最前面:鉴于网上爬虫猖獗,博客被盗时有发生,这里需要来个链接,大家请认准来自博客园的Scoter:http://www.cnblogs.com/scoter2008,本文将持续更新 最近绿盟给扫描 ...

  9. Storm 基础知识

    分布式的实时计算框架,storm对于实时计算的意义类似于hadoop对于批处理的意义. Storm的适用场景: 1.流数据处理:storm可以用来处理流式数据,处理之后将结果写到某个存入中去. 2.持 ...

  10. BI Project Managerment

    Design doc is the meta data of the code. The project management plan is crucial to your project sinc ...