天天看点

CSS 实现加载动画之三-钢琴按键

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

1. 先看gif图

CSS 实现加载动画之三-钢琴按键

2. 代码实现思路

CSS 实现加载动画之三-钢琴按键

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