圓形正在加載是一個常見的動態效果,它可以讓用戶在等待頁面加載時感受到一種活力和互動性。我們可以使用CSS來實現一個簡單的圓形正在加載效果。
以下是我們所需的CSS代碼。我們使用了動畫效果,讓圓形不斷地旋轉,形成一個不斷變化的加載效果。pre標簽中的代碼就是我們的CSS樣式代碼。
.loader { border-top: 5px solid #ddd; border-right: 5px solid #ddd; border-bottom: 5px solid #ddd; border-left: 5px solid #000; border-radius: 50%; width: 60px; height: 60px; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
接下來,我們需要在HTML中使用這個CSS類來創建出一個樣式符合要求的圓形正在加載效果。以下是HTML的代碼,我們在一個div元素中嵌套了一個span元素,來展示圓形加載效果。
<div class="loader"><span></span></div>
運用以上代碼,我們最終可以得到一個元素,它實現了簡單的圓形正在加載效果,如下所示。
上一篇css+控制打印范圍
下一篇css+層疊+滑動+屏幕