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