“Html:Svg loading”的版本间的差异
来自小鱼君和他的朋友们
（[InPageEdit] 没有编辑摘要） |
（[InPageEdit] 没有编辑摘要） |
||
| （未显示同一用户的2个中间版本） | |||
| 第1行： | 第1行： | ||
{{#tag:html| | {{#tag:html| | ||
| − | |||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svgspinner" width="52px" height="52px"> | <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svgspinner" width="52px" height="52px"> | ||
| − | <g | + | <g transform="translate(26,26)"> |
| − | <circle | + | <circle r="20" stroke="#33a0fb" stroke-width="6" fill="none"></circle> |
</g> | </g> | ||
<style> | <style> | ||
| 第9行： | 第8行： | ||
animation: circle-spin 3s infinite linear; | animation: circle-spin 3s infinite linear; | ||
stroke-dasharray: 126; | stroke-dasharray: 126; | ||
| − | stroke- | + | stroke-linecap: round; |
} | } | ||
@keyframes circle-spin { | @keyframes circle-spin { | ||
0% { | 0% { | ||
transform: rotate(0deg); | transform: rotate(0deg); | ||
| − | stroke-dashoffset: | + | stroke-dashoffset: 124; |
} | } | ||
50% { | 50% { | ||
| − | stroke-dashoffset: | + | stroke-dashoffset: 0; |
} | } | ||
100% { | 100% { | ||
transform: rotate(1080deg); | transform: rotate(1080deg); | ||
| − | stroke-dashoffset: | + | stroke-dashoffset: 124; |
} | } | ||
} | } | ||
2019年12月3日 (二) 03:33的最新版本
