CSS是一種用來描述網(wǎng)站布局和樣式的語言,這種語言可以使用許多不同的屬性和值來創(chuàng)造各種各樣的效果。一個大家熟知的應用中,iOS系統(tǒng)使用了一種非常流行的加載動畫來顯示應用程序正在加載內容,而我們可以使用CSS來仿制這種效果。
.loader { width: 50px; height: 50px; margin: 0 auto; position: relative; animation: spinner 1s infinite linear; } .loader:before, .loader:after { content: ""; position: absolute; border-radius: 50%; } .loader:before { width: 20px; height: 20px; left: 5px; top: 5px; background-color: #007AFF; animation: bouncer 1s infinite ease-in-out; } .loader:after { width: 10px; height: 10px; right: 5px; top: 5px; background-color: #FFF; animation: bouncer 1s infinite ease-in-out 0.2s; } @keyframes spinner { 0% { transform: rotate(0deg); -webkit-transform: rotate(0deg); } 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg); } } @keyframes bouncer { 0%, 100% { transform: scale(0); -webkit-transform: scale(0); } 50% { transform: scale(1); -webkit-transform: scale(1); } }
上面的代碼生成了一個div元素,寬高都為50px,其中包含兩個動畫元素。這些元素都在不斷地運行兩個CSS動畫,其中一個元素在藍色背景上彈跳,而另一個元素在白色背景上彈跳。
如果你想調整動畫細節(jié),可以根據(jù)需要調整這些元素的參數(shù)。例如,你可以調整元素大小、顏色、位置等。這個技術可以為你的應用程序增添一份專業(yè)感,并顯示出你對用戶體驗的關注。