Open sollrei opened 5 years ago
codepen
原文: https://glennmccomb.com/articles/building-a-pure-css-animated-svg-spinner/
html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <circle cx="50" cy="50" r="45"/> </svg>
css
// SVG 样式. svg { max-width: 100px; animation: 2s linear infinite svg-animation; } // Circle 样式. circle { animation: 1.4s ease-in-out infinite both circle-animation; display: block; fill: transparent; stroke: #2f3d4c; stroke-linecap: round; stroke-dasharray: 283; // 圆周长 stroke-dashoffset: 280; stroke-width: 10px; transform-origin: 50% 50%; }
包括三部分的动画
利用css animation改变<circle>元素stroke-dasharray和 stroke-dashoffset属性的值,实现的划线伸长变短的效果
<circle>
stroke-dasharray
stroke-dashoffset
@keyframes circle-animation { 0%, 25% { stroke-dashoffset: 280; } 50%, 75% { stroke-dashoffset: 75; } 100% { stroke-dashoffset: 280; } }
circle元素自身的顺时针旋转
75%到100%旋转的地方划线是逆时针向后收缩变短的效果,由于circle顺时针旋转的比较快,看起来整体还是顺时针旋转 @keyframes circle-animation { 0%, 25% { // ... transform: rotate(0); }
75%到100%旋转的地方划线是逆时针向后收缩变短的效果,由于circle顺时针旋转的比较快,看起来整体还是顺时针旋转
@keyframes circle-animation { 0%, 25% { // ... transform: rotate(0); }
50%, 75% { // ... transform: rotate(45deg); }
100% { // ... transform: rotate(360deg); } }
svg { animation: 2s linear infinite svg-animation; }
@keyframes svg-animation { 0% { transform: rotateZ(0deg); } 100% { transform: rotateZ(360deg) } }
兼容性IE11及以下不支持
codepen
原文: https://glennmccomb.com/articles/building-a-pure-css-animated-svg-spinner/
html
css
包括三部分的动画
利用css animation改变
<circle>
元素stroke-dasharray
和stroke-dashoffset
属性的值,实现的划线伸长变短的效果circle元素自身的顺时针旋转
50%, 75% { // ... transform: rotate(45deg); }
100% { // ... transform: rotate(360deg); } }
@keyframes svg-animation { 0% { transform: rotateZ(0deg); } 100% { transform: rotateZ(360deg) } }