CSS可以實現各種酷炫的頁面加載效果,比如旋轉、淡入淡出、縮放等等。下面我們來看一些實現方法。
.loading{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; } .loading:after{ content: ""; display: block; position: absolute; top: 50%; left: 50%; width: 50px; height: 50px; border: 3px solid #ccc; border-top-color: #000; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin{ from{ transform: translate(-50%, -50%) rotate(0deg); } to{ transform: translate(-50%, -50%) rotate(360deg); } }
上面的代碼實現了一個加載頁面的效果,當頁面加載時,一個圓形的小球會在頁面中心旋轉。
另外,還可以使用CSS3的transition屬性實現一個簡單的淡入淡出效果。
.loading{ opacity: 0; transition: opacity 0.3s ease-in-out; } .loading.active{ opacity: 1; }
通過添加和刪除.active類名,實現頁面的淡入和淡出效果。
以上是兩種較為簡單的實現方式,實際上還有很多其他的方法可以實現頁面效果,需要根據不同情況選擇合適的方式。
上一篇css實訓結果小結
下一篇css實現自動切換效果