首页 > 代码库 > CSS 实现加载动画之三-钢琴按键
CSS 实现加载动画之三-钢琴按键
今天做的这个动画实现也是非常简单，简单数几行代码就可以搞定。给这个动画取了个优雅的名字--钢琴按键，也实在是想不出什么更形象的名字了。废话不多说，直接上图。
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. 源代码
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 实现加载动画之三-钢琴按键
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。