畫圓
用SVG畫一個圓先。
html:
<svg class="load" viewBox="25 25 50 50">
<circle class="loading" cx="50" cy="50" r="20" fill="none" />
</svg>
.load {
width: 80px;
height: 80px;
}
.loading {
stroke: rgb(53, 157, 218);
stroke-width: 5;
fill: none;
}
效果是這樣的：
用SVG畫圓
動畫
定義一個動畫并使用查刻。
@keyframes dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 130, 200;
stroke-dashoffset: -50;
}
100% {
stroke-dasharray: 130, 200;
stroke-dashoffset: -188;
}
}
.loading {
stroke: rgb(53, 157, 218);
stroke-width: 5;
fill: none;
animation: dash 1.5s linear infinite;
}
效果變成這樣：
旋轉
最后給動畫添加上旋轉的效果。
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.load {
animation: rotate 2s linear infinite;
}
最終的效果：
原理
主要利用 SVG 繪制一個圓形凤类，結合其 stroke 屬性穗泵，最后加上一些 css3 中的動畫，實現(xiàn)最終的 loading 動畫效果谜疤。
繪制圓形時佃延，使用 SVG <circle> 標簽,下面是 SVG 代碼：
<svg class="load" viewBox="10 10 80 80">
<circle class="loading" cx="50" cy="50" r="30" />
</svg>
- cx, cy：定義圓點的 x 和 y 坐標现诀，默認為(0,0)；
- r：定義圓形的半徑履肃；
- viewBox="x, y, width, height"：x：左上角的橫坐標仔沿，y：左上角縱坐標，width：寬度尺棋，height：高度封锉。這個就像qq截圖，x膘螟，y 是選中的起始點成福，width 和 height 是選擇截圖的寬度和高度。viewBox 區(qū)域會鋪滿 SVG荆残，所以可以定義 SVG 的大小奴艾，來限制 viewBox 的大小。
繪制好圓形脊阴，使用SVG的 stroke 屬性握侧，來自定義描邊樣式。常見的 stroke 屬性有：
- stroke：定義描邊的顏色嘿期；
- stroke-width：定義描邊的寬度品擎；
- stroke-dasharray：用于創(chuàng)建虛線描邊；
stroke-dasharray: 10, 10;
- stroke-dashoffset：定義描邊的起始位置备徐；
stroke-dashoffset:10;
-
stroke-linecap：定義描邊端點的樣式萄传；
圖片來自于[SVG|MDN](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Fills_and_Strokes) -
stroke-linejoin：定義兩個描邊線段之間連接方式；
圖片來自于[SVG|MDN](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Fills_and_Strokes) - stroke-opacity：定義描邊的透明度蜜猾；
利用這些stroke屬性秀菱，定義前面出現(xiàn)的@keyframes dash、@keyframes rotate蹭睡，就可以達到我們想要的效果了衍菱。
