我正在创建一个登录按钮，这个按钮最初有一个关闭的挂锁图标，我想当指针在上面时（悬停时），这个图标会更改为打开挂锁的图标。这将是主要需求。
那么，如果你们中有人对如何使用挂锁图标（在悬停时以动画方式打开）有任何想法，那就更好了。
我尝试过在线搜索，但找不到任何可以帮助我的内容：/我将在下面留下代码。
HTML格式：
<header class=“header”><div class=“header-box-row”><div class=“header-logo-box”><图像src=“/HeavenBoost.net/HeavenBoost.png”alt=“”class=“header-logo”/></div><button type=“button”class=“nav-toggler”><span></span></按钮><nav class=“nav”><ul class=“head-ul”><div>主页</a></li>购物</a></li>支持</a></li>术语</a></li></div><div class=“buttons-mobile desktop-hide”><a href=“#”class=“head-btn-a-mobile head-1st-btn-mobile”><svgxmlns=“http://www.w3.org/2000/svg"fill=“无”viewBox=“0 0 24 24”strokeWidth=“{1.5}”冲程=“#fff”className=“w-6 h-6”class=“头部图标”><路径strokeLinecap=“圆形”strokeLinejoin=“圆形”d=“M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 0 00-2.25-2.25H6.75a22.25 2.25 0 00-2.25 2.25v6.75a2.2.5 2.25 00 002.25 2.25 2.25z”/></svg>登录</a><a href=“#”class=“head-btn-a-mobile head-1st-btn-mobile”><svgxmlns=“http://www.w3.org/2000/svg"fill=“无”viewBox=“0 0 24 24”strokeWidth=“{1.5}”冲程=“#fff”className=“w-6 h-6”class=“head-icon”><路径strokeLinecap=“圆形”strokeLinejoin=“圆形”d=“M2.25h1.386c.51 0.955.343 1.087.835l.383 1.437M7.5 14.25a3 0 00-3 h15.75-12.75-3 h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25 L5.106 5.272M6 20.25a.75.75 0 11-1.5 0.75.75 O 011.5 0zm12.75 0a.75.750 0 11-1.5 0.75 0 011.5 0z”/></svg>购买</a></div></ul></nav><div class=“buttons移动隐藏”><a href=“#”class=“head-btn-a head-1st-btn”><svgxmlns=“http://www.w3.org/2000/svg"fill=“无”viewBox=“0 0 24 24”strokeWidth=“{1.5}”冲程=“#fff”className=“w-6 h-6”class=“head-icon”><路径strokeLinecap=“圆形”strokeLinejoin=“圆形”d=“M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 0 00-2.25-2.25H6.75a22.25 2.25 0 00-2.25 2.25v6.75a2.2.5 2.25 00 002.25 2.25 2.25z”/></svg>登录</a><a href=“#”class=“head-btn-a head-2nd-btn”><svgxmlns=“http://www.w3.org/2000/svg"fill=“无”viewBox=“0 0 24 24”strokeWidth=“{1.5}”冲程=“#fff”className=“w-6 h-6”class=“head-icon”><路径strokeLinecap=“圆形”strokeLinejoin=“圆形”d=“M2.25h1.386c.51 0.955.343 1.087.835l.383 1.437M7.5 14.25a3 0 00-3 h15.75-12.75-3 h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25 L5.106 5.272M6 20.25a.75.75 0 11-1.5 0.75.75 O 011.5 0zm12.75 0a.75.750 0 11-1.5 0.75 0 011.5 0z”/></svg>购买</a></div></div></标题>
CSS（客服代表）：
* {边距：0；填充：0；盒大小：border-box；颜色：#212529；}html格式{字体大小：62.5%；}车身{font-family：“Inter”，无衬线；线高：1；字体宽度：400；背景色：#141414；}/*Firefox浏览器*/* {滚动条宽度：薄；滚动条颜色：#4186d7；}/*Chrome、Edge和Safari*/*：：-webkit-scrollbar{宽度：10px；宽度：10px；}*：：-webkit-scrollbar-track{边距：5px；背景色：#141414；}*：：-webkit-scrollbar跟踪：悬停{背景色：#141414；}*：：-webkit滚动条轨迹：活动{背景色：#141414；}*：：-webkit-scrollbar-thumb{边距：5px；背景色：#4186d7；}*：：-webkit-scrollbar-thumb:悬停{背景色：#4186d7；}*：：-webkit-scrollbar-thumb:活动{背景色：#4186d7；}/**********************//*一般组件*//**********************/.desktop-hide桌面{显示：无；可见性：隐藏；}a、，李{列表样式：无；text-decoration：无；显示：嵌入式块；}按钮{显示：嵌入式块；}/**********************//*集管截面*//**********************//*收割台*/.标头{位置：固定；顶部：0；底部：0；宽度：100%；最大高度：9.6rem；padding-top：0；padding-bottom:0；z指数：999；衬垫：2.4雷姆2.4雷姆0 2.4雷姆；z指数：999；}.行{显示：flex；justify-content:space-between；对齐项目：居中；最大宽度：128雷姆；边距：0自动；填充：2.4雷姆4.8雷姆；边界半径：2.4雷姆；边框：1px实心#4186d7；背景滤镜：模糊（10px）；背景色：rgba（20、20、20和0.8）；z指数：999；}.标头-logo-box{最大宽度：18雷姆；}.header-徽标{宽度：100%；}.头向上{显示：flex；列表样式：无；justify-content：中心；对齐项目：居中；间隙：0.4rem；}.头部-a{填充：0.8rem 1.6rem；边界半径：0.6rem；过渡：全部0.3s；字体大小：1.4rem；}.head-a:链接{颜色：#fff；}.head-a：已访问{颜色：#fff；}.head-a：悬停{颜色：#fff；背景色：#4186d7；}.head-a：激活{颜色：#fff；背景色：#3b79c2；}.按钮{字体大小：1.4rem；显示：flex；间隙：0.8rem；}.头部-图标{宽度：2.4rem；}.头部-btn-a{填充：1.6rem 2.4rem；边界半径：1.2雷姆；显示：flex；对齐项目：居中；justify-content：中心；间隙：0.4rem；过渡：均为0.3s；}.head-btn-a:链接{字体大小：1.4rem；颜色：#fff；}.head-btn-a：已访问{字体大小：1.4rem；颜色：#fff；}.head-btn-a：悬停{字体大小：1.4rem；颜色：#fff；}.head-btn-a：激活{字体大小：1.4rem；颜色：#fff；}.封头-2个{背景色：#5492db；}.head-2nd-btn：悬停{背景色：#3b79c2；}.mainb接口{向左填充：5rem；向右填充：5rem；}.nav切换器{高度：34px；宽度：44px；背景：无；边距：4px；光标：指针；边界：无；显示：无；}.nav开关跨度{高度：2px；宽度：20px；背景色：#fff；显示：块；边距：自动；位置：相对；过渡：全部0.3s轻松；}.nav-toggler.有效量程{背景色：透明；}.nav切换开关跨度：：之前，.nav切换范围：：之后{内容：“”；位置：绝对；左：0；顶部：0；宽度：100%；高度：100%；背景色：#fff；过渡：全部0.3s轻松；}.nav切换范围：：之前{转换：translateY（-6px）；}.nav-toggler.有效跨度：：之前{变换：旋转（45度）；}.nav切换范围：：之后{转换：translateY（6px）；}.nav-toggler.有效跨度：：之后{变换：旋转（135度）；}@媒体（最大宽度：991px）{.移动端{显示：无；}.行{显示：flex；柔性缠绕：缠绕；justify-content:space-between；}.align-items居中{对齐项目：居中；}.调整二者之间的内容{justify-content:space-between；}.nav切换器{显示：块；}.标题.导航{宽度：100%；填充：0；最大高度：0px；溢出：隐藏；可见性：隐藏；过渡：全部0.5s轻松；}.header.nav.open（页眉导航打开）{可见性：可见；}.header导航{显示：flex；弯曲方向：立柱；填充：1.8rem 0 0；边缘顶部：1.2雷姆；边框顶部：1px实心rgba（255、255、255、0.2）；}.头部-a{填充：0.8rem 1.6rem；边界半径：0.6rem；过渡：均为0.3s；字体大小：1.4rem；}.header导航ul li{显示：块；边距：0；}}
当前正在使用的图标包： https://herocons.com/
