点击查看html编辑器说明文档

SVG loading动画edit icon

|
|
Fork(复制)
|
|
作者:
穿越者X57

👉 新版编辑器已上线,点击进行体验吧!

BUG反馈
嵌入
设置
下载
HTML
格式化
支持Emmet,输入 p 后按 Tab键试试吧!
<head> ...
展开
</head>
<body>
            
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 193 96.5"><defs><linearGradient id="a"><stop offset="0%" stop-color="rgba(255,255,255,0)"/><stop offset="45%" stop-color="#4CC3FF"/><stop offset="65%" stop-color="#7C64D5"/><stop offset="100%" stop-color="#FF057C"/></linearGradient></defs><path fill="url(#a)" d="M96.5 2c51.9 0 94 41.8 94.5 93.5 0 .5.4 1 1 1s1-.5 1-1C192.4 42.7 149.5 0 96.5 0S.5 42.7 0 95.5c0 .6.5 1 1 1s1-.4 1-1C2.5 43.8 44.6 2 96.5 2z"/></svg>
        
</body>
SCSS
格式化
            
            html, body {
    height: 100%;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
}

svg {
    transform-origin: bottom center;
    width: 195px;
    animation: rotate 600ms infinite linear;
}

@keyframes rotate {
    to { transform: rotate(1turn); }
}
        
JS
格式化
            
            
        
预览
控制台