mask-image进度加载学习
案例来自:http://www.cnblogs.com/vajoy/p/5095511.html;
效果展示:
代码展示:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <title></title> 5 <style> 6 app>div.loading-mask{ 7 position: absolute; 8 top: 150px; 9 left: 50%; margin-left: -204px; 10 width:409px;height:158px; 11 overflow: hidden; 12 } 13 .loading-mask mask-bg,.loading-mask mask-top{ 14 position: absolute; 15 width:409px;height:158px; 16 mask-image: url(mask.png); 17 -webkit-mask-image: url(mask.png); 18 } 19 .loading-mask mask-bg{ 20 background-image: linear-gradient(353deg,#89C027,#89C027 28%,#E96036 28%,#E96036 49%,#FEF158 49%,#FEF158 72%,#76C5EE 72%); 21 background-image: -webkit-linear-gradient(353deg,#89C027,#89C027 28%,#E96036 28%,#E96036 49%,#FEF158 49%,#FEF158 72%,#76C5EE 72%); 22 background-image: -moz-linear-gradient(353deg,#89C027,#89C027 28%,#E96036 28%,#E96036 49%,#FEF158 49%,#FEF158 72%,#76C5EE 72%); 23 } 24 .loading-mask mask-top{ 25 background-image: linear-gradient(bottom,#EEEEEE,#EEEEEE 60%,rgba(0,0,0,0) 60%); 26 background-image: -webkit-linear-gradient(bottom,#EEEEEE,#EEEEEE 60%,rgba(0,0,0,0) 60%); 27 background-image: -moz-linear-gradient(bottom,#EEEEEE,#EEEEEE 60%,rgba(0,0,0,0) 60%); 28 background-size: auto 300% ; 29 -webkit-background-size: auto 300% ; 30 -moz-background-size: auto 300% ; 31 background-position: 0 -50%; 32 transition: all 10s cubic-bezier(0, 0, 0.28, 1) 1s; 33 } 34 app.loading mask-top{ 35 background-position: 0 -8%; 36 } 37 app.loading-done mask-top{ 38 background-position: 0 0; 39 transition: all 0.3s; 40 } 41 </style> 42 <script type="text/javascript"> 43 setTimeout(function(){ 44 document.querySelector('app').className='loading-done'; 45 },10) 46 </script> 47 </head> 48 <body> 49 <app> 50 <div class="loading-mask"> 51 <svg width="409px" height="158px"> 52 <defs> 53 <mask id="mask"> 54 <image width="409px" height="158px" xlink:href="mask.png"></image> 55 </mask> 56 </defs> 57 <foreignObject width="409px" height="158px" style="mask: url(#mask);"> 58 59 <mask-bg></mask-bg> 60 <mask-top></mask-top> 61 62 </foreignObject> 63 </svg> 64 65 </div> 66 </app> 67 </body> 68 </html>
