实现效果
如图所示：
首先得准备三张图，一张是浅黄色的背景图loading_bg.png，一张是深红色的图loading.png，最后一张为bolang.png。
css代码
body{background:#ffe894;} .loading_bg{width:113px; height:111px;url(loading_bg.png) no-repeat left top;margin:30px auto;} .loading{position:relative; -webkit-mask-image:url(loading.png);} .show{ width:120px;187px; position:absolute; left:0; top:40px; animation:sploosh 3s ease-in-out both infinite; -webkit-animation: background-image: url(bolang.png); } .show_01{-webkit-animation-delay: -0.8s; animation-delay: opacity:0.2;} .show_02{ -1.6s;0.4;} .show_03{ -2.4s;0.6;} .show_04{ -3.2s;0.8;} @-webkit-keyframes sploosh{ 0% {background-position: 0 bottom;} 100% {background-position: 200px bottom;} } @keyframes sploosh{ }
HTML代码
<div class="loading_bg"> ="loading"> ="show_01 show"></div="show_02 show"="show_03 show"="show_04 show"</> >
