<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.t1{
animation: t 3s infinite;
transform-origin:center;
}
@Keyframes t{
0%,100%{
height:200px;
}
50%{
height:20px;
}
}
/* .yuan1{
fill:none;
stroke:red;
stroke-width:50px;
stroke-dasharray:1256;
stroke-dashoffset:0;
transform-origin:center;
animation: y1 3s infinite
}
.yuan2{
fill:none;
stroke:yellow;
stroke-width:50px;
stroke-dasharray:1256;
stroke-dashoffset:0;
transform-origin:center;
animation: y1 3s 0.1s infinite
}
.yuan3{
fill:none;
stroke:blue;
stroke-width:50px;
stroke-dasharray:1256;
stroke-dashoffset:0;
transform-origin:center;
animation: y1 3s 0.2s infinite
}
.xq{
animation: xq 1s 0.5s infinite
}
.xq1{
animation: xq 1s infinite
}
.xq2{
animation: xq 1s infinite
}
@Keyframes y1{
0%{
stroke-dashoffset:1250;
transform:rotate(360deg);
}
50%{
stroke-dashoffset:1190;
}
100%{
stroke-dashoffset:1250;
}
}
@Keyframes xq{
0%{
transform:translate(0px,0px);
}
50%{
transform:translate(0px,-20px);
}
100%{
transform:translate(0px,0px);
}
} */
/* .zi{
font-size:110px;
stroke:red;
stroke-width:5px;
stroke-dasharray:10;
animation: z1 3s linear infinite
}
.zi1{
font-size:110px;
stroke:blue;
stroke-width:5px;
stroke-dasharray:20;
animation: z2 2s linear infinite
}
.zi2{
font-size:110px;
stroke:yellow;
stroke-width:5px;
stroke-dasharray:30;
animation: z3 8s linear infinite
}
.zi3{
font-size:110px;
stroke:white;
stroke-width:5px;
stroke-dasharray:10;
animation: z4 5s linear infinite;
}
.zi4{
font-size:110px;
stroke:black;
stroke-width:10px;
animation: z5 10s linear infinite;
}
@Keyframes z1{
0%,100%{
stroke-dasharray:520px;
}
50%{
stroke-dasharray:20px;
}
}
@Keyframes z2{
0%,100%{
stroke-dasharray:40px;
}
50%{
stroke-dasharray:20px;
}
}
@Keyframes z3{
0%,100%{
stroke-dasharray:40px;
}
50%{
stroke-dasharray:200px;
}
}
@Keyframes z4{
0%,100%{
stroke-dasharray:25px;
}
50%{
stroke-dasharray:100px;
}
}
@Keyframes z5{
0%,100%{
fill:black;
}
50%{
stroke-opacity:0;
}
} */
/* .fk1{
width:150px;
height:200px;
animation: bianhua 12s infinite ease-in 1s alternate
} */
/* .ty{
animation: tybh 12s infinite ease-in
} */
/* .xuxian1{
width:250px;
height:200px;
fill:yellow;
stroke:red;
stroke-width:5px;
stroke-dasharray:0 460 230 0;
} */
/* .xuxian{
width:250px;
height:200px;
fill:yellow;
stroke:red;
stroke-width:5px;
stroke-dasharray:20px;
animation: xx 3s linear forwards */
}
/* @Keyframes bianhua{
10%{
fill:red;width:300px;height:20px;
}
30%{
fill:yellow;width:50px;height:60px;
}
50%{
fill:blue;width:350px;height:260px;
}
70%{
fill:yellow;
}} */
/* @Keyframes tybh{
10%{
fill:red; cx:80px;cy:80px;rx:60px;ry:200px;
}
30%{
fill:yellow;
}
50%{
fill:blue;
}
70%{
fill:yellow;
}
} */
/* @Keyframes xx{
10%{
stroke-dasharray:700px;
}
50%{
stroke-dasharray:800px;
}
100%{
stroke-dasharray:900px;
}
} */
</style>
</head>
<body>
<svg width="500" height="500">
<!-- <rect class="fk1"/>
<ellipse cx="50" cy="50" rx="40" ry="20" class="ty"/> -->
<!-- <rect class="xuxian1">
<set attributeName="class" to="xuxian" begin="mousemove"/>
<set attributeName="class" to="xuxian1" begin="mouseout"/>
</rect> -->
<!-- <rect width="650" height="200" fill="black"/>
<text x="20" y="120"class="zi">LI BO FENG</text>
<text x="20" y="120"class="zi1">LI BO FENG</text>
<text x="20" y="120"class="zi2">LI BO FENG</text>
<text x="20" y="120"class="zi3">LI BO FENG</text>
<text x="20" y="120"class="zi4">LI</text>
<text x="140" y="120"class="zi4">BO</text>
<text x="332" y="120"class="zi4">FENG</text> -->
<!-- <circle cx="250" cy="250" r=200 class="yuan1"/>
<circle cx="250" cy="250" r=200 class="yuan2"/>
<circle cx="250" cy="250" r=200 class="yuan3"/>
<circle cx="250" cy="250" r=15 class="xq"/>
<circle cx="200" cy="250" r=15 class="xq1"/>
<circle cx="300" cy="250" r=15 class="xq2"/> -->
<rect x="250" y="250" width="20px" height="200px" ry="10" rx="10" class="t1"/>
</svg>
</body>
</html>