<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>
HTML
格式化
支持Emmet,输入 p 后按 Tab键试试吧!
<head> ... </head>
<body>
</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
格式化