CSS 仿 iOS 加載中的效果主要是使用了 CSS3 動畫特性來實現的。在實現過程中,我們主要需要關注以下幾個方面:
/* 首先,我們需要為我們的 loading 效果定義一個容器 */ .loading-container { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background-color: #ffffff; } /* 接著,我們需要為容器添加 loading 動畫 */ @keyframes loading { 0% { transform: translateY(0); } 20% { transform: translateY(-20px); } 40% { transform: translateY(0); } 100% { transform: translateY(0); } } .loading-container::before { content: ""; display: block; width: 10px; height: 10px; border-radius: 50%; background-color: #7f7f7f; position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); animation: loading 1.5s ease-in-out infinite; } /* 最后,我們還需要為 loading 添加一些額外的樣式,以獲得更加逼真的效果 */ .loading-container::after { content: "Loading"; font-size: 12px; color: #7f7f7f; position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); }
通過上面的 CSS 代碼,我們可以實現一個比較簡單但卻十分逼真的 iOS 加載中效果。同時,我們可以根據實際需求進行一些擴展,如更改 loading 容器的顏色、調整 loading 動畫的速度等等。