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             409px;height:158px;
11             overflow: hidden;
12         }
13         .loading-mask mask-bg,.loading-mask mask-top{
14             position: absolute;
15             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>
View Code
原文地址:https://www.cnblogs.com/QIQIZAIXIAN/p/6807748.html