CSS仿淘寶加載框是網頁設計領域中必備的技能之一，今天就來分享一下如何實現這個效果。

.tb-loading-box {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.3);
z-index: 99999;
}
.tb-loading-icon {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 60px;
height: 60px;
border-radius: 50%;
box-sizing: border-box;
border: 5px solid #ffffff;
border-top-color: #f00;
animation: rotate 1s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

代碼分為兩部分，第一部分是覆蓋整個頁面的黑色半透明背景，第二部分是作為icon的白色圓環。其中利用了CSS3的動畫效果讓圓環旋轉起來。整個加載框的實現非常簡單，只需要在需要加載的地方加上一個