“Html:Svg loading”的版本间的差异
来自小鱼君和他的朋友们
（[InPageEdit] 没有编辑摘要） |
（[InPageEdit] 没有编辑摘要） |
||
| （未显示同一用户的6个中间版本） | |||
| 第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> | ||
.svgspinner circle { | .svgspinner circle { | ||
| − | animation: circle-spin | + | animation: circle-spin 3s infinite linear; |
| − | + | stroke-dasharray: 126; | |
| + | stroke-linecap: round; | ||
} | } | ||
@keyframes circle-spin { | @keyframes circle-spin { | ||
| − | + | 0% { | |
transform: rotate(0deg); | transform: rotate(0deg); | ||
| + | stroke-dashoffset: 124; | ||
} | } | ||
| − | + | 50% { | |
| − | transform: rotate( | + | stroke-dashoffset: 0; |
| + | } | ||
| + | 100% { | ||
| + | transform: rotate(1080deg); | ||
| + | stroke-dashoffset: 124; | ||
} | } | ||
} | } | ||
</style> | </style> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
</svg> | </svg> | ||
}} | }} | ||
2019年12月3日 (二) 03:33的最新版本
