css之svg 制作圆及旋转
要使用CSS对SVG中的圆进行制作和旋转，你可以使用以下的基本方法。首先，在HTML中添加SVG元素，并在其中添加一个圆形元素。然后，使用CSS来控制这个圆的样式和动画。
HTML:
<svg width="100" height="100" viewBox="0 0 100 100">
<circle id="myCircle" cx="50" cy="50" r="40" />
</svg>CSS:
#myCircle {
fill: none;
stroke: #000;
stroke-width: 2;
/* 添加旋转动画 */
animation: rotate 2s linear infinite;
}
/* 定义旋转动画 */
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}这段代码将创建一个旋转的黑色圆形，其大小和位置由SVG的viewBox属性定义。CSS中的animation属性定义了一个名为rotate的动画，该动画会无限循环并且每次旋转周期是2秒。
评论已关闭