CSS實現了很多好玩的動畫效果,當我們需要在網頁的等待過程中,可以用CSS來實現一個加載中的動畫,讓用戶有一種輕松愉悅的感覺。
下面是一個簡單的CSS加載中動畫示例:
.loader { border: 16px solid #f3f3f3; border-top: 16px solid #3498db; border-radius: 50%; width: 120px; height: 120px; animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
這個動畫是一個旋轉的圓形,由一個邊框顏色為灰色的圓圈和一個邊框顏色為藍色的小圓圈組成。通過CSS的屬性transition,我們可以實現一個漸變過渡效果,讓用戶在等待的時候不會感到突兀。
在HTML代碼中,你可以使用以下代碼來插入動畫:
這個例子僅僅是一個簡單的開始,你可以在這個基礎上去擴展自己的動畫,比如加入文字描述、更改動畫的顏色、變換動畫樣式、實現自定義的SVG圖標等等。
最后,我們的目標是盡可能的讓用戶感到賓至如歸。所以加入合適的動畫效果將會帶給用戶愉悅的體驗,同時也可以提升你的網頁設計品質。
上一篇css實現伸縮列表
下一篇css實現倒三角 提示框