天天看點

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