console
<svg width="1000" height="1000">
<circle cx="50" cy="50" r="5" fill="none" class="y1" stroke-width="3"/>
<circle cx="50" cy="50" r="20" fill="none" class="y2" stroke-width="3"/>
<rect width="2" height="100" x="100" y="200" class="zhizhen" transform-origin="50% 20%"/>
<rect width="2" height="80" x="100" y="200" class="zhizhen2" fill="red" transform-origin="50% 25%"/>
<circle cx="500" cy="500" r=150 fill="none" stroke="red" stroke-width="10"/>
<circle cx="500" cy="500" r=150 fill="none" stroke="blue" class="k1" stroke-width="5" transform-origin="50% 50%"/>
</svg>
@keyframes dong1{
0%{
r:5;
stroke: grey;
}
100%{
r:20;
stroke:transparent;
}
}
@keyframes dong2{
0%{
r:22;
stroke:transparent;
}
80%{
stroke: grey;
}
100%{
r:25;
stroke: transparent;
}
}
@keyframes zhong{
0%{
transform: rotate(0deg)
}
100%{
transform: rotate(360deg)
}
}
@keyframes zhong2{
0%{
transform: rotate(0deg)
}
100%{
transform: rotate(360deg)
}
}
.y1{
animation: dong1 2.5s infinite
}
.y2{
animation: dong2 2s infinite 1s
}
.zhizhen{
animation: zhong 60s infinite
}
.zhizhen2{
animation: zhong2 3600s infinite
}
@keyframes quan{
0%{
stroke-dasharray: 235 707;
transform: rotate(0deg);
}
100%{
stroke-dasharray: 235 707;
transform: rotate(360deg);
}
}
.k1{
animation: quan 3s infinite linear
}