前言
这次趁着假期闲下来的时间，捣鼓了一个新的小效果，用 CSS和SVG绘制的一个变化的彩色圆环。整个实现过程比较简单，大家可以先看到下面的效果预览部分，十分简单，没有花里胡哨的技巧。话不多说，咱们直接进入主题。
效果预览
最终实现的相关效果如下。
SVG / HTML部分
首先看到HTML部分，这里的HTML部分由SVG绘制而成。相关代码如下。
<svg viewBox="0 0 500 500">
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#00ffff;">
<animate attributeName="stop-color"
values="#00ffff;#ff00ff;#ffff00;#00ffff"
dur="10s" repeatCount="indefinite" />
</stop>
<stop offset="100%" style="stop-color:#ff00ff;">
<animate attributeName="stop-color"
values="#ff00ff;#ffff00;#00ffff;#ff00ff"
dur="10s" repeatCount="indefinite" />
</stop>
</linearGradient>
<filter id="glow" x="-30%" y="-30%" width="160%" height="160%">
<feGaussianBlur stdDeviation="5" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<path d="M250,100 C400,100 400,400 250,400 C100,400 100,100 250,100">
<animate
attributeName="d"
dur="12s"
repeatCount="indefinite"
values="
M250,100 C400,100 400,400 250,400 C100,400 100,100 250,100;
M250,100 C350,150 350,350 250,400 C150,350 150,150 250,100;
M250,100 C300,200 300,300 250,400 C200,300 200,200 250,100;
M250,100 C400,100 400,400 250,400 C100,400 100,100 250,100
"
keyTimes="0; 0.3; 0.7; 1"
calcMode="spline"
keySplines="0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1"
/>
</path>
</svg>
这里创建了一个动态变形的SVG图形，具有渐变颜色和发光效果。SVG基础结构中创建一个500×500像素的SVG画布，viewBox定义了坐标系和纵横比。
然后接着创建从左上(0%,0%)到右下(100%,100%)的线性渐变，两个色标(<stop>)都有颜色动画效果，第一个色标(offset="0%")在青色(#00ffff)、品红(#ff00ff)、黄色(#ffff00)之间循环，第二个色标(offset="100%")在品红、黄色、青色之间循环，动画周期为10秒，无限循环。
接着使用发光滤镜创建一个超出元素边界的滤镜区域(扩大30%)，包含两个步骤，feGaussianBlur应用5个单位的模糊效果，feMerge将模糊效果和原始图形合并，创建发光效果。
然后用路径(<path>)定义了一个对称的曲线形状(类似椭圆形)，使用贝塞尔曲线(C命令)创建平滑曲线。
接着在路径变形动画(<animate>)动画效果中，在12秒内循环改变路径形状，定义了4个关键帧形状：
原始大椭圆形
中等大小的变形
更小的变形
回到原始形状
最终使用三次贝塞尔曲线(keySplines)实现平滑过渡。
所以最终的整体效果是一个会呼吸变形的曲线图形，边缘有发光效果，颜色在青-品红-黄之间平滑过渡，形状在三种状态之间平滑变形，所有动画都是无限循环的。
CSS部分
看完了上面之后，紧接着看到SVG的CSS部分，相关代码如下。
svg {
width: 90vmin;
height: 90vmin;
transition: transform 0.3s ease-out;
}
svg:hover {
transform: scale(1.02);
}
path {
fill: none;
stroke: url(#gradient);
stroke-width: 3;
stroke-linecap: round;
filter: url(#glow);
transition: stroke-width 0.3s ease;
}
path:hover {
stroke-width: 4;
}
这里为SVG图形和路径元素添加了样式和交互效果。
首先是SVG容器样式，进行了尺寸设置，width: 90vmin 和 height: 90vmin 使SVG的宽高等于视口较小尺寸(宽或高)的90%，确保图形在不同屏幕尺寸下保持比例
然后设置了一个悬停动画，transition: transform 0.3s ease-out为transform属性添加0.3秒的平滑过渡效果，使用ease-out时间函数(快速开始，缓慢结束)，:hover时，SVG会轻微放大到原尺寸的1.02倍(2%的放大)，产生"悬浮凸起"的交互效果。
最后是路径(Path)的样式，整体的交互效果是当用户将鼠标悬停在SVG上时，整个SVG容器会轻微放大(1.02倍)，路径的描边会略微变粗(从3增加到4)，所有这些变化都是平滑过渡的，不是突然变化。
以上就是整个CSS样式的介绍了。
总结
以上就是整个效果的实现过程了，代码简单易懂。另外，感兴趣的小伙伴们还可以在现有基础上发散思维，比如增加点其他效果，或者更改颜色等等。关于该效果如果大家有更好的想法欢迎在评论区分享，互相学习。最后，完整代码在码上掘金里可以查看，如果有什么问题大家在评论区里讨论~
