<!DOCTYPE html>
<html>
<haed><title></title>
<style>
/* .k1{
width:100px;
height:100px;
fill:red;
stroke:black;
stroke-width:5px;
x:20;
y:20;
stroke-dasharray:0 200 100 0;
}
.kk1{
width:100px;
height:100px;
fill:red;
stroke:black;
stroke-width:5px;
x:20;
y:20;
stroke-dasharray:2;
animation:zhuan 4s infinite;
}
@keyframes zhuan{
0%{
stroke-dasharray:2px;
}
50%{
stroke-dasharray:60px;
}
100%{
stroke-dasharray:90px;
}
} */
/* .k1{
width:100px;
height:100px;
fill:#cc3;
animation: myframe 3s infinite ease-in-out 1s alternate;
}
@keyframes myframe{
0%{
width:200px;
height:200px;
fill:red;
}
50%{
fill:pink;
width:300px;
height:300px;
}
100%{
fill:yellow;
width:400px;
height:400px;
}
} */
/* svg{
width:500px;
height:500px;
backgroumd:black;
}
.zi1{
font-size:100px;
stroke:pink;
stroke-width:4px;
stroke-dasharray:4px;
animation:zi1 10s infinite;
}.zi2{
font-size:100px;
stroke:red;
stroke-width:2px;
stroke-dasharray:4px;
animation:zi2 10s infinite;
}.zi3{
font-size:100px;
stroke:yellow;
stroke-width:3px;
stroke-dasharray:4px;
animation:zi3 10s infinite;
}.zi4{
font-size:100px;
stroke:blue;
stroke-width:1px;
stroke-dasharray:4px;
animation:zi4 10s infinite;
}.zi5{
font-size:100px;
stroke:Chicken excrement yellow;
stroke-width:5px;
stroke-dasharray:4px;
animation:zi5 10s infinite;
}
/* 流动 */
/* @Keyframes zi1{
0%,100%{
stroke-dasharray:500px
} 20%{
stroke-dasharray:10px
} 50%{
stroke-dasharray:100px
} 70%{
stroke-dasharray:250px
}
}@Keyframes zi2{
0%,100%{
stroke-dasharray:500px
} 20%{
stroke-dasharray:25px
} 50%{
stroke-dasharray:125px
} 70%{
stroke-dasharray:375px
}
}@Keyframes zi3{
0%,100%{
stroke-dasharray:500px
} 20%{
stroke-dasharray:45px
} 50%{
stroke-dasharray:145px
} 70%{
stroke-dasharray:415px
}
}@Keyframes zi4{
0%,100%{
stroke-dasharray:500px
} 20%{
stroke-dasharray:65px
} 50%{
stroke-dasharray:165px
} 70%{
stroke-dasharray:435px
}
}@Keyframes zi5{
0%,100%{
stroke-dasharray:500px
} 20%{
stroke-dasharray:85px
} 50%{
stroke-dasharray:185px
} 70%{
stroke-dasharray:455px
}
} */
/* svg{
width:500px;
height:500px;
}
.yuan1{
fill:none;
stroke:red;
stroke-width:100px;
stroke-dasharray:1253;
stroke-dashoffset:0;
animation:bian 2s infinite;
transform-origin:center;
}.yuan2{
fill:none;
stroke:yellow;
stroke-width:100px;
stroke-dasharray:1253;
stroke-dashoffset:0;
animation:bian 2s 0.3s infinite ;
transform-origin:center;
}.yuan3{
fill:none;
stroke:blue;
stroke-width:100px;
stroke-dasharray:1253;
stroke-dashoffset:0;
animation:bian 2s 0.5s infinite;
transform-origin:center;
}.neiyuan1{
fill:red;
animation:tiao 3s infinite;
}.neiyuan2{
fill:louke;
animation:tiao 3s 0.2s infinite;
}.neiyuan3{
fill:blue;
animation:tiao 3s 0.4s infinite;
}
@keyframes bian
{
0%{
stroke-dashoffset:1200;
}50%{
stroke-dashoffset:1100;
}100%{
stroke-dashoffset:1200;
transform:rotate(360deg);
}
}
@keyframes tiao
{
0%{
transform:translateY(-30px);
}
}
</style>
</haed>
<body>
<!-- <svg width="50000px" height="50000px">
<rect class="k1">
<set attributeName="class" to="kk1" begin="mouseover"/>
<set attributeName="class" to="k1" begin="mouseout"/>
</rect>
</svg> -->
<svg>
<!-- <text class="zi1" x="100"
y="100" fill="none" >时崎狂三
</text><text class="zi2" x="100"
y="100"fill="none" >时崎狂三
</text><text class="zi3" x="100"
y="100" fill="none" >时崎狂三
</text><text class="zi4" x="100"
y="100" fill="none" >时崎狂三
</text><text class="zi5" x="100"
y="100" fill="none" >时崎狂三
</text> -->
<!-- <circle cy="250" cx="250" r="200" class="yuan1"/>
<circle cy="250" cx="250" r="200" class="yuan2"/>
<circle cy="250" cx="250" r="200" class="yuan3"/>
<circle cy="250" cx="210" r="15" class="neiyuan1"/>
<circle cy="250" cx="250" r="15" class="neiyuan2"/>
<circle cy="250" cx="290" r="15" class="neiyuan3"/> -->
<!-- <text x="100px" y="200px">正义的伙伴
</text> -->
</svg>
</body>
</html>