SOURCE

<svg width="700px" height="700px">
	<!-- <path d="M0,0 L0,100 H100 V0 Z" stroke="black" fill-opacity="0" stroke-width="2"/> -->
	<!-- <path d="M0,10 H100 M0,20 H100 M0,30 H100 M0,40 H100 M0,50 H100 M0,60 H100 M0,70 H100 M0,80 H100 M0,90 H100" stroke="black" fill-opacity="0" stroke-width="0.5"/>
    <path d="M10,0 V100 M20,0 V100 M30,0 V100 M40,0 V100 M50,0 V100 M60,0 V100 M70,0 V100 M80,0 V100 M90,0 V100" stroke="black" fill-opacity="0" stroke-width="0.5"/> -->-->
	<defs>
		<g id="fengche">
			<path d="M50,50 L50,10 70,40" />
			<path d="M50,50 L90,50 60,70" />
			<path d="M50,50 L50,90 30,60" />
			<path d="M50,50 L10,50 40,30" />
		</g>
	</defs>
    <use xlink:href="#fengche" class="one"x="180" y="320" stroke="gold"/></use>
    <use xlink:href="#fengche" class="two" x="380" y="320" stroke="gold"/></use>
    <use xlink:href="#fengche" class="san" x="380" y="220" stroke="gold"/></use>
    <use xlink:href="#fengche" class="si" x="180" y="220" stroke="gold"/></use>
</svg>

@keyframes xuanzhuan{
    0%{ transform: rotate(0deg);fill: goldenrod;}
    10%{ transform: rotate(36deg);fill: rebeccapurple;}
    20%{ transform: rotate(72deg);fill: darkcyan;}
    30%{ transform: rotate(108deg);fill: rosybrown;}
    40%{ transform: rotate(144deg);fill: olive;}
    50%{ transform: rotate(180deg);fill: palegreen;}
    60%{ transform: rotate(216deg);fill: hotpink;}
    70%{ transform: rotate(252deg);fill: skyblue;}
    80%{ transform: rotate(288deg);fill: brown;}
    90%{ transform: rotate(324deg);fill: navy;}
    100%{ transform: rotate(360deg);fill: salmon;}
}
/* .feng1{
    fill: gold;
}
.feng2{
    fill: green;
}
.feng3{
    fill:red;
}
.feng4{
    fill: blue;
} */
#fengche{
    animation: xuanzhuan 1s  infinite linear;
    transform-box: fill-box;
    transform-origin: center;
}