原文:

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

 

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. 源代码

1  2  3  4 
      5  6 
      7 
      8 
      9 30 31 32 33 
     
34 35 
     
      36     
      
37     
      
38     
      
39 
     
40 41