CSS3 提供了許多實用的動畫效果,其中包括全屏加載動畫。這種動畫可以在頁面加載內容時顯示出來,讓用戶感受到頁面正在加載的過程。下面是一個簡單的示例:
html, body { height: 100%; } #loader-wrapper { position: fixed; z-index: 99999; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; text-align: center; } #loader { display: inline-block; margin: 0 auto; position: relative; top: 50%; transform: translateY(-50%); width: 64px; height: 64px; } #loader:before { animation: 2s linear infinite all; border: 7px solid #000; border-right-color: transparent; border-radius: 50%; content: ""; height: 50px; width: 50px; position: absolute; top: 0px; right: 0px; } @keyframes all { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
上面的代碼中,我們首先設置了 body 和 html 的高度為 100%,這樣可以使加載動畫占據整個屏幕。然后我們定義了一個固定定位的 div#loader-wrapper,它包含了加載動畫的 HTML 結構。在 #loader 中,我們使用了一個偽元素 :before 來創建一個旋轉的圓形。這個圓形的動畫由 all 動畫實現,控制它的旋轉方向和速度。
通過這樣的 CSS3 動畫效果,我們可以為用戶提供更好的頁面加載體驗。這種全屏加載動畫可以很容易地應用到任何網站中,幫助用戶更好地了解頁面正在加載的狀態。
上一篇mysql輸對密碼閃退
下一篇html 代碼 圖片大小