1. 使用svg实现抽风路径
<style>
path{
animation: move 1s linear alternate infinite;
stroke:brown;
stroke-width:5px;
stroke-dashoffset: 0px;
stroke-dasharray: 200px;
}
@keyframes move{
from{
stroke-dashoffset: 0px;
}
to{
stroke-dashoffset: 400px;
}
}
</style><body>
<svg width=200 height=200 style="border:2px solid black;">
<path d="M 0 100 h 200" ></path>
</svg>
</body>结果：
2. 使用svg实现高斯模糊
<svg width=200 height=200 style="border:1px solid black;">
<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="5"></feGaussianBlur>
</filter>
</defs>
<rect x=0 y=0 width=150 height=150 style="filter:url(#Gaussian_Blur)"></rect>
</svg>
<img src="./0.jpg" alt="" style="width:200px;height:200px;filter:url(#Gaussian_Blur)">
3. 用svg写一个仪表盘