CSS3全屏加載是一種常用于網頁開發中的技術,它能夠使得網頁在加載過程中呈現出更加美觀的效果。通過使用CSS3動畫和過渡效果,可以讓用戶在等待頁面加載時,看到一些有趣的元素。
/* CSS3全屏加載的代碼示例 */ /* 定義全屏加載器容器的樣式 */ .loading { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: #fff; z-index: 9999; /* 讓加載器處于最高層級 */ text-align: center; display: flex; align-items: center; justify-content: center; } /* 定義加載圖標的樣式 */ .loading .spinner { width: 50px; height: 50px; border-radius: 50%; border: 5px solid #ccc; border-top-color: #f24; animation: spin 1s infinite linear; } /* 定義旋轉動畫 */ @keyframes spin { to { transform: rotate(360deg); } } /* 使用JS控制全屏加載器的出現和隱藏 */ function showLoading() { document.querySelector('.loading').style.display = 'flex'; } function hideLoading() { document.querySelector('.loading').style.display = 'none'; }
以上是一個CSS3全屏加載器的簡單示例代碼,可以通過JS來控制加載器的出現和隱藏。在實際的網頁開發中,可以根據具體需求來定制自己的loading效果,以達到更好的視覺體驗。