SOURCE

console 命令行工具 X clear

                    
>
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
}