css3 實現進度條

css3實現圓圈進度條

實現原理

首先圓圈進度條是一直在旋轉的，旋轉我們可以利用的是css3的rotate(deg)實現

rotate(deg):

一個二維旋轉的css3屬性，作用是將指定元素旋轉指定的角度,正值表示順時針方向旋轉，負值表示逆時針防線旋轉，旋轉的角度範圍爲(-360deg~360deg)。
一般的進度條的是長這樣的

這可以看成是一個圓弧在一直旋轉，html中沒有圓形標籤，都是方形的，但可以通過設置border-radius將容器變爲圓形，然後旋轉即可.

關鍵樣式

@keyframes load{ //這裏設置動畫，使容器旋轉一週
from{
transform:rotate(0deg);
}
to{
transform:rotate(360deg);
}
}
.loading{
width:120px;
height:120px;
position: absolute;
top:50px;
left: 50%;
margin-left: -60px;
/*
設置爲圓形形狀
爲了看到其中的一段旋轉的效果，這裏將其他邊的透明度設置爲0.4，從而隱藏了其他的邊
*/
border-radius: 50%;
border-top: 15px solid rgb(255,255,255,1);
border-left: 15px solid rgb(255,255,255,0.4);
border-right: 15px solid rgb(255,255,255,0.4);
border-bottom: 15px solid rgb(255,255,255,0.4);
animation:load 2s infinite linear;

}

擴展

roate的三維實現樣式有

a.旋轉

1.rotateX(deg) //繞x軸旋轉
2.rotateY(deg) //繞Y軸旋轉
3. rotateZ(deg) //繞Z軸旋轉

b.平移

translate(a,b) //在x，y方向平移a,b像素距離。利用translate(-50%,50%)可以實現居中。
translateX(a) //在X方向平移a的像素距離。
translateY(a)//在Y方向平移a的像素距離。
translateZ(a)//在Z方向平移a的像素距離。 　

在應用3d動畫使，必須在所在元素樣式中申明 transform-style: preserve-3d

其座標系圖如下所示

其中z的負方向爲垂直指向屏幕的方向

效果展示

https://zhijs.github.io/web/loading/