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

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. IOS之UIImageView--小实例项目--带音效的拳皇动画

    内容大纲: 1.初步工作 2.开始敲代码 3.注意 4.可能遇到的错误 5.设置音频速率在代码顺序上的注意点 带音效的拳皇动画实例项目 初步工作 1.新建一Objective-C工程之后,将需要的拳皇 ...

  2. iOS开发中的一些定时器

    在软件开发过程中,我们常常需要在某个时间后执行某个方法,或者是按照某个周期一直执行某个方法.在这个时候,我们就需要用到定时器. 然而,在iOS中有很多方法完成以上的任务,到底有多少种方法呢?经过查阅资 ...

  3. [Weblogic]startWebLogic.cmd配置JAVA_OPTIONS无效的解决思路与方案

    事情背景: 由于某个项目原因,需要在2个域的startWebLogic.cmd文件加入如下设置 set JAVA_OPTIONS=%JAVA_OPTIONS% -javaagent:"pat ...

  4. 为Asp.net MVC中的RenderSection设置默认内容

    1. RenderSection的简单介绍 Asp.net MVC中提供了RenderSection方法,这样就能够在Layout中定义一些区块,这些区块留给使用Layout的view来实现比如我们定 ...

  5. Effective Java 29 Consider typesafe heterogeneous containers

    When a class literal is passed among methods to communicate both compile-time and runtime type infor ...

  6. 管理故事——和尚挑水的故事

    有时候企业.公司的各种混乱都是源于管理问题,例如人浮于事.资源错配.机构臃肿-----,暂且不说企业管理.项目的管理,光是个人工作的管理.一个处理不好,接踵而来的就是一堆问题,可怕的不是出现问题,而是 ...

  7. PowerVault TL4000 Tape Library 告警：“Media Attention”

      Dell PowerVault TL4000 磁带库机的指示灯告警,从Web管理平台登录后,在菜单"Library Status"下发现如下告警信息:  Library Sta ...

  8. 【JavaScript】JQuery中$.fn、$.extend、$.fn.extend

    Web开发肯定要使用第三方插件,对于一个炫丽的效果都忍不住想看看对方是如何实现的,刚下载了一个仿京东商品鼠标经过时局部放大的插件.看了两眼JQuery源码,看看就感觉一头雾水.JQuery本来自己学的 ...

  9. PS网页设计教程XXVI——如何在PS中创建一个专业的网页布局

    作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,“熟读唐诗三百首,不会作诗也会吟”. 本系列的教程来源于网上的PS教程,都是国外的,全英文的.本人尝试 ...

  10. 【mysql】关于innodb中MVCC的一些理解

    一.MVCC简介 MVCC (Multiversion Concurrency Control),即多版本并发控制技术,它使得大部分支持行锁的事务引擎,不再单纯的使用行锁来进行数据库的并发控制,取而代 ...