SOURCE

console 命令行工具 X clear

                    
>
console
<!DOCTYPE html>
<html>
	<head>
		<title></title>
        <style>
            svg{
                width:500px;
                height:500px;
            }
            .y1{
                fill:none;
                stroke:skyblue;
                stroke-width:100px;
                 stroke-dasharray:1256;
                stroke-dashoffset:0;
                animation:ly1 2s  infinite;
                transform-origin:center;
            }
              .y2{
                fill:none;
                stroke:green;
                stroke-width:100px;
                 stroke-dasharray:1256;
                stroke-dashoffset:0;
                animation:ly1 2s 0.15s infinite;
                transform-origin:center;
            }
              .y3{
                fill:none;
                stroke:red;
                stroke-width:100px;
                stroke-dasharray:1256;
                animation:ly1 2s 0.32s infinite;
                stroke-dashoffset:0;
                transform-origin:center;
            }
            @Keyframes ly1{
                0%{stroke-dashoffset:1220;}
                50%{stroke-dashoffset:1100;}
                100%{stroke-dashoffset:1220;
                transform:rotate(360deg);}
            }
                .xy1{
                    fill:skyblue;
                    animation:txy1 1s infinite;
                }
                .xy2{
                    fill:green;
                    animation:txy1 1s 0.25s infinite;
                }
                .xy3{
                    fill:red;
                    animation:txy1 1s 0.5s infinite;
                }
            @Keyframes txy1{
                0%,100%{
                    transform:translateY(0px);
                }
                50%{
                     transform:translateY(-50px);
                }
                
            }
        </style>
	</head>
	<body>
		<svg>
            <circle cx="250" cy="250" r="200" class="y1"/>
            <circle cx="250" cy="250" r="200" class="y2"/>
            <circle cx="250" cy="250" r="200" class="y3"/>
            <circle cx="210" cy="250" r="15" class="xy1"/>
            <circle cx="250" cy="250" r="15" class="xy2"/>
            <circle cx="290" cy="250" r="15" class="xy3"/>
        </svg>
	</body>
</html>