码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2014-09-26 20:23:18      阅读:186      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   http   color   io   使用   ar   strong   

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

 

1. 先看gif图

bubuko.com,布布扣

 

2. 代码实现思路

bubuko.com,布布扣

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 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" Content="text/html; charset=utf-8;">
 5 <title>CSS3实现加载的动画效果3</title>
 6 <meta name="author" content="rainna" />
 7 <meta name="keywords" content="rainna‘s css lib" />
 8 <meta name="description" content="CSS3" />
 9 <style>
10 *{margin:0;padding:0;}
11 .m-load{background:url(‘load.gif‘) center center no-repeat;}
12 
13 .m-load,.m-load2{width:60px;height:10px;margin:100px auto;}
14 
15 /** 加载动画的静态样式 **/
16 .m-load2:before,.m-load2:after,.m-load2 .item{float:left;width:10px;height:10px;margin:0 2px 0 0;background:#444;}
17 .m-load2:before,.m-load2:after{content:‘‘;}
18 
19 /** 加载动画 **/
20 @-webkit-keyframes load{
21     0%{opacity:1;}
22     100%{opacity:0;}
23 }
24 .m-load2:before{-webkit-animation:load 0.5s linear 0s infinite;}
25 .m-load2 .item:nth-child(1){-webkit-animation:load 0.5s linear 0.1s infinite;}
26 .m-load2 .item:nth-child(2){-webkit-animation:load 0.5s linear 0.2s infinite;}
27 .m-load2 .item:nth-child(3){-webkit-animation:load 0.5s linear 0.3s infinite;}
28 .m-load2:after{-webkit-animation:load 0.5s linear 0.4s infinite;}
29 </style>
30 </head>
31 
32 <body>
33 <div class="m-load"></div>
34 
35 <div class="m-load2">
36     <div class="item"></div>
37     <div class="item"></div>
38     <div class="item"></div>
39 </div>
40 </body>
41 </html>

 

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

标签:des   style   blog   http   color   io   使用   ar   strong   

原文地址:http://www.cnblogs.com/zourong/p/3995039.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!