loading頁面

時間 2019-11-17

標籤 loading 頁面简体版

原文原文鏈接

雖然今天考試，但仍是要寫個人每日一博^_^css

loading頁面的效果圖html

看起來簡單，實際上要寫的東西很多T_T瀏覽器

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Document</title>
 7     <style>
 8     body {
 9         background: gainsboro;
10     }
11     .loader {
12         margin: 4em auto;
13     }
14     .loader--audioWave {
15         width: 3em;
16         height: 2em;
17         background: linear-gradient(#9b59b6, #9b59b6) 0 50%, linear-gradient(#9b59b6, #9b59b6) 0.625em 50%, linear-gradient(#9b59b6, #9b59b6) 1.25em 50%, linear-gradient(#9b59b6, #9b59b6) 1.875em 50%, linear-gradient(#9b59b6, #9b59b6) 2.5em 50%;
18         background-repeat: no-repeat;
19         background-size: 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em;
20         animation: audioWave 1.5s linear infinite;
21     }
22     @keyframes audioWave {
23         25% {
24             background: linear-gradient(#3498db, #3498db) 0 50%, linear-gradient(#9b59b6, #9b59b6) 0.625em 50%, linear-gradient(#9b59b6, #9b59b6) 1.25em 50%, linear-gradient(#9b59b6, #9b59b6) 1.875em 50%, linear-gradient(#9b59b6, #9b59b6) 2.5em 50%;
25             background-repeat: no-repeat;
26             background-size: 0.5em 2em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em;
27         }
28         37.5% {
29             background: linear-gradient(#9b59b6, #9b59b6) 0 50%, linear-gradient(#3498db, #3498db) 0.625em 50%, linear-gradient(#9b59b6, #9b59b6) 1.25em 50%, linear-gradient(#9b59b6, #9b59b6) 1.875em 50%, linear-gradient(#9b59b6, #9b59b6) 2.5em 50%;
30             background-repeat: no-repeat;
31             background-size: 0.5em 0.25em, 0.5em 2em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em;
32         }
33         50% {
34             background: linear-gradient(#9b59b6, #9b59b6) 0 50%, linear-gradient(#9b59b6, #9b59b6) 0.625em 50%, linear-gradient(#3498db, #3498db) 1.25em 50%, linear-gradient(#9b59b6, #9b59b6) 1.875em 50%, linear-gradient(#9b59b6, #9b59b6) 2.5em 50%;
35             background-repeat: no-repeat;
36             background-size: 0.5em 0.25em, 0.5em 0.25em, 0.5em 2em, 0.5em 0.25em, 0.5em 0.25em;
37         }
38         62.5% {
39             background: linear-gradient(#9b59b6, #9b59b6) 0 50%, linear-gradient(#9b59b6, #9b59b6) 0.625em 50%, linear-gradient(#9b59b6, #9b59b6) 1.25em 50%, linear-gradient(#3498db, #3498db) 1.875em 50%, linear-gradient(#9b59b6, #9b59b6) 2.5em 50%;
40             background-repeat: no-repeat;
41             background-size: 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 2em, 0.5em 0.25em;
42         }
43         75% {
44             background: linear-gradient(#9b59b6, #9b59b6) 0 50%, linear-gradient(#9b59b6, #9b59b6) 0.625em 50%, linear-gradient(#9b59b6, #9b59b6) 1.25em 50%, linear-gradient(#9b59b6, #9b59b6) 1.875em 50%, linear-gradient(#3498db, #3498db) 2.5em 50%;
45             background-repeat: no-repeat;
46             background-size: 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 2em;
47         }
48     }
49     </style>
50 </head>
51 
52 <body>
53     <div class="loader loader--audioWave"></div>
54     <script src="http://cdn.bootcss.com/prefixfree/1.0.7/prefixfree.min.js"></script>
55 </body>
56 
57 </html>

天天進步一點點，加油！spa

忘記了很重要的一點，若是討厭寫瀏覽器前綴的同窗能夠試一下一個插件prefixfree,能夠幫你省略不少前綴的書寫。插件

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。