CSS可以實現很多有趣的效果，比如加載旋轉就是其中之一。

.load {
border-radius: 50%;
width: 10em;
height: 10em;
border-top: 0.5em solid #3498db;
border-right: 0.5em solid rgba(52,152,219,0.2);
border-bottom: 0.5em solid rgba(52,152,219,0.2);
border-left: 0.5em solid rgba(52,152,219,0.2);
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

上面代碼就是實現加載旋轉的代碼，我們將一個圓形作為加載動畫的載體，在其四條邊設置邊框并設置顏色，但需要注意的是Top邊要設置成我們想要的顏色，其它三邊需要設置成透明色。接著我們使用CSS的動畫技術將其旋轉起來，這一段代碼中我們設置了動畫的名稱為spin，并設置旋轉2秒，旋轉過程中線性變化，無限次循環。

值得提醒大家的是，在使用動畫的過程中我們一定要使用transform屬性，否則動畫不會生效。transform這個屬性表示對元素進行變形，其中rotate是其中一個常用的操作方法，可以旋轉元素。

好了，這樣一個流暢簡潔又有趣的加載旋轉就完成了。是不是很簡單呢？