首页 - 技术 - CSS 实现加载动画之三-钢琴按键

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

2023-09-27 17:06
-->

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

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





CSS3实现加载的动画效果3











-->