<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.b03{fill:red;
animation:c04 1.5s infinite;
}
.b02{fill:#1689FA;
animation:c04 1s 2s infinite;
}
.b01{fill:#FFCD41;
animation:c04 1s 1.5s infinite;
}
/* 旋转触发 */
.a01{
fill:none;
stroke:red;
stroke-width:100px;
stroke-dasharray:1180;
animation:c01 1s infinite linear;
stroke-dashoffset:0;
transform-origin:center;
}
.a02{
fill:none;
stroke:#F37B3C;
stroke-width:100px;
stroke-dasharray:1180;
stroke-dashoffset:0;
animation:c02 2s 0.5s infinite linear;
stroke-dashoffset:0;
transform-origin:center;
}
.a03{
fill:none;
stroke:#179FFA;
stroke-width:100px;
stroke-dasharray:1180;
stroke-dashoffset:0;
animation:c03 3s 1s infinite linear;
stroke-dashoffset:0;
transform-origin:center;
}
@Keyframes c01{
0% {stroke-dashoffset:1230;
}
50%{stroke-dashoffset:1100;
}
100%{stroke-dashoffset:1230;
transform: rotate(360deg);
}
}
@Keyframes c02{
0% {stroke-dashoffset:1230;
}
50%{stroke-dashoffset:1100;
}
100%{stroke-dashoffset:1230;
transform: rotate(360deg);
}
}
@Keyframes c03{
0% {stroke-dashoffset:1230;
}
50%{stroke-dashoffset:1100;
}
100%{stroke-dashoffset:1230;
transform: rotate(360deg);
}
}
/* 圆点触发 */
/* @Keyframes c04{
0% {transform: translate(0%, 0%);
}
25%{transform: translate(0%, 10%);
}
75%{transform: translate(0%, -10%);
}
100%{stroke-dashoffset:1100;
;
} */
.d01{
fill:#F4F6F7;
animation:d04 1s 0.5s infinite;
}
.d02{
fill:#F4F6F7;
animation:d04 1s infinite;
}
.d03{
fill:#F4F6F7;
animation:d04 1s infinite;
}
@Keyframes d04{
0%,100% {r:12; opacity:1;
}
25%{r:16;opacity:0.4;
}
75%{r:7;opacity:0.8;
}
}
}
</style>
</head>
<body>
<svg width="500" height="500">
<!-- <circle class="a01" cx="250" cy="250" r=200 />
<circle class="a02" cx="250" cy="250" r=200 />
<circle class="a03" cx="250" cy="250" r=200 />
<circle class="b01" cx="180" cy="250" r=20 />
<circle class="b02" cx="250" cy="250" r=20 />
<circle class="b03" cx="310" cy="250" r=20 /> -->
< <rect width="900" height="300" fill="red" x="120"y="90"/>
<defs>
<filter id="f1">
<feGaussianBlur stdDeviation="15" />
</filter>
</defs>
<circle class="d01" cx="310" cy="250" r=12 />
<circle class="d02" cx="210" cy="250" r=12 />
<circle class="d03" cx="410" cy="250" r=12 />
</svg>
</body>
</html>