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

时间：2024-06-20 12:05:26

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

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

 <!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>

相关文章