昨天晚上看到这个头像：
看它特别像哔哩哔哩直播时主播那个特效，但他这个是录的GIF，我今天搞了好久，复刻差不多，但只是在网页显示，无法搞成GIF，有没有啥办法可以转成GIF
这是代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>发光直播中头像 - 终极版</title>
<style>
/* 页面基础样式，用于居中和美化背景 */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #1a1a1a; /* 深色背景更能凸显发光效果 */
}
/* 头像的根容器，关键在于 position: relative */
.glowing-avatar-container {
position: relative; /* 成为所有内部绝对定位元素的“锚点” */
width: 80px;
height: 80px;
cursor: pointer;
}
/*
* 这是新增加的“光晕层”
*/
.avatar-glow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* 关键：使用滤镜实现高斯模糊 */
filter: blur(10px);
/* 适当降低透明度，让光晕不那么刺眼 */
opacity: 0.7;
/* 让光晕稍微比头像小一点，效果更集中 */
transform: scale(0.95);
/* 确保光晕在最底层 */
z-index: 1;
}
.avatar-glow img,
.avatar-image img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
/* 头像本体层 */
.avatar-image {
position: relative; /* 使用relative让它能拥有自己的z-index */
z-index: 2; /* 确保头像在光晕之上 */
border: 3px solid #FA7298; /* 保留粉色直播边框 */
border-radius: 50%;
box-sizing: border-box; /* 让边框不影响总体尺寸 */
}
/* “直播中”标签样式 (与之前相同) */
.pink-live {
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
height: 20px;
padding: 0 6px;
background-color: #FA7298;
border-radius: 6px;
white-space: nowrap;
z-index: 3; /* 确保标签在最顶层 */
</html>
效果：
美中不足的是，无法转成GIF！！
在像办法ing
我资料卡帖子那个上魂环 2.0 的就是 Canvas 导出为 GIF