原理很简单，就是几张颜色不同的波浪图来回滚动。
1、首先得准备三张图，一张是浅黄色的背景图loading_bg.png，一张是深红色的图loading.png，最后一张为bolang.png。
2、css代码：
body{background:#ffe894;}
.loading_bg{width:113px; height:111px;background:url(loading_bg.png) no-repeat left top;margin:30px auto;}
.loading{width:113px; height:111px;position:relative; -webkit-mask-image:url(loading.png);}
.show{
width:120px; height:187px; position:absolute; left:0; top:40px;
animation:sploosh 3s ease-in-out both infinite;
-webkit-animation:sploosh 3s ease-in-out both infinite;
background-image: url(bolang.png);
}
.show_01{-webkit-animation-delay: -0.8s; animation-delay: -0.8s; opacity:0.2;}
.show_02{-webkit-animation-delay: -1.6s; animation-delay: -1.6s; opacity:0.4;}
.show_03{-webkit-animation-delay: -2.4s; animation-delay: -2.4s; opacity:0.6;}
.show_04{-webkit-animation-delay: -3.2s; animation-delay: -3.2s; opacity:0.8;}
@-webkit-keyframes sploosh{
0% {background-position: 0 bottom;}
100% {background-position: 200px bottom;}
}
@keyframes sploosh{
0% {background-position: 0 bottom;}
100% {background-position: 200px bottom;}
}
3、html代码：
<div class="loading_bg">
<div class="loading">
<div class="show_01 show"></div>
<div class="show_02 show"></div>
<div class="show_03 show"></div>
<div class="show_04 show"></div>
</div>
</div>
部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！