HTML-iconfont动态图标SVG效果--阿里巴巴图标矢量库
给北大打工，实现官网首页动态图标效果_哔哩哔哩_bilibili
https://www.bilibili.com/video/BV1Ys4y1c7oh/?spm_id_from=333.1007.top_right_bar_window_default_collection.content.click&vd_source=924f5dad6f2dcb0a3e5dca4604287ecd（本篇笔记操作方法来自pink老师~老师真是个大好人）
按照老师的操作，先去阿里巴巴的官网搞个图标
一、下载SVG格式的图标
随便找个图标，点下载
得到一个SVG格式的文件，我们在VSCode中打开它
这个时候复制粘贴这个：下载的文件中<svg>标签包裹的全部内容
二、复制粘贴到HTML文件
<body><svg t="1684727592583" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"p-id="1362" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><pathd="M582.78 807.75H253.53c-16.57 0-30-13.43-30-30s13.43-30 30-30h329.25c16.57 0 30 13.43 30 30s-13.43 30-30 30z"p-id="1363" fill="#d4237a" class="icon1"></path><pathd="M782.55 919.53H242.06c-38.87 0-75.22-16.62-102.38-46.79-26.35-29.29-40.87-68.01-40.87-109.05V372.91c0-41.04 14.51-79.76 40.87-109.05 27.15-30.17 63.51-46.79 102.38-46.79h46.47l14.17-71.25c5.34-26.83 34.5-46.3 69.35-46.3h301.1c34.85 0 64.01 19.47 69.35 46.3l14.17 71.25h25.88c38.87 0 75.22 16.62 102.38 46.79 26.35 29.29 40.87 68.01 40.87 109.05V763.7c0 41.04-14.51 79.76-40.87 109.05-27.16 30.16-63.52 46.78-102.38 46.78zM242.06 277.07c-45.9 0-83.25 42.99-83.25 95.84V763.7c0 52.84 37.34 95.84 83.25 95.84h540.49c45.9 0 83.25-42.99 83.25-95.84V372.91c0-52.84-37.34-95.84-83.25-95.84h-50.5c-14.31 0-26.63-10.11-29.42-24.15l-18.09-90.98c-2.24-1.12-6.28-2.42-11.38-2.42h-301.1c-5.1 0-9.14 1.3-11.38 2.42l-18.1 90.98c-2.79 14.04-15.11 24.15-29.42 24.15h-71.1z"p-id="1364" fill="#d4237a" class="icon1"></path><pathd="M512.3 680.14c-105.95 0-192.15-86.2-192.15-192.15s86.2-192.15 192.15-192.15 192.15 86.2 192.15 192.15-86.2 192.15-192.15 192.15z m0-324.29c-72.87 0-132.15 59.28-132.15 132.15s59.28 132.15 132.15 132.15S644.45 560.87 644.45 488 585.17 355.85 512.3 355.85z"p-id="1365" fill="#d4237a" class="icon1"></path><path d="M729.15 777.75m-43.75 0a43.75 43.75 0 1 0 87.5 0 43.75 43.75 0 1 0-87.5 0Z" p-id="1366" fill="#d4237a" class="icon1"></path></svg>
</body>打开HTML浏览，图标是可视的
三、给SVG标签中的Path添加类名
实现动态的效果就是一个描边的动画效果，给SVG中的path标签都添加上同一个类名，这里取名icon1（我这里的vsg里面有三个path标签，四个path标签都加上同一个类名icon1）
四、编辑类名样式
<style>.icon1 {/* 填充图标颜色 因为要的是线条，不需要它的颜色*/fill: none;/*图形元素的外轮廓颜色(描边颜色)*/stroke: #333333;/*图形元素的外轮廓的宽度*/stroke-width: 3;/*两端的形状（round让两端平滑一点）*/stroke-linecap: round;}</style>
五、CSS添加个动画效果
@keyframes iconMove {0% {/*固定线条的长度和间距dasharray:描绘线条第一个值：线条长度第二个值：空隙距离例如：长度为5，间隙为5，每长度5后间隙5再长度的虚线*/stroke-dasharray: 0, 600px;}100% {stroke-dasharray: 600px, 0;}}六、鼠标经过Hover添加动画效果
注意：这里的伪类处理器是给到svg标签（类名icon）而不是给到svg标签里面的path
.icon:hover {animation: iconMove 2s;}
相关文章：
HTML-iconfont动态图标SVG效果--阿里巴巴图标矢量库
给北大打工，实现官网首页动态图标效果_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1Ys4y1c7oh/?spm_id_from333.1007.top_right_bar_window_default_collection.content.click&vd_source924f5dad6f2dcb0a3e5dca4604287ecd（本篇笔记操作方法…...
C++17完整导引-模板特性之编译器的if语句
编译期if语句 if constexpr 编译期if语句使用编译期if语句编译期if的注意事项编译期if影响返回值类型即使在 *then* 部分返回也要考虑 *else* 部分编译期短路求值 其他编译期if的示例完美返回泛型值使用编译期if进行类型分发 带初始化的编译期if语句在模板之外使用编译期if参考…...
告别Excel，免费大数据分析与可视化工具，让你的论文图表“高大上”
数据分析工具很多，可以分为表格、数据库、BI工具、编程等四大工具。每个大类又有很多的工具，例如表格包括Excel、WPS、Google Sheets、Airtable等。编程工具包括Python和R。 搞科研几年了，笔者一直都是在使用Excel做数据分析和可视化…...
C++ 中的继承和多态
C 中的继承和多态 一、继承二、函数重载、隐藏、覆盖、重写1.函数重载（Function Overload）2.函数隐藏（Function Hiding）3.函数重写与函数覆盖（Function Override） 三、多态四、纯虚函数和抽象类五、多重继承…...
NestedFormer:用于脑肿瘤分割的嵌套模态感知Transformer
文章目录 NestedFormer: Nested Modality-AwareTransformer for Brain Tumor Segmentation摘要方法Global Poolformer EncoderNested Modality-Aware Feature AggregationModality-Sensitive Gating 实验结果 NestedFormer: Nested Modality-AwareTransformer for Brain Tumor …...
【SQLServer】sqlserver数据库导入oracle
将sqlserver数据库导入到oracle 实用工具： SQL Server Management Studio 15.0.18424.0 SQL Server 管理对象 (SMO) 16.100.47021.07eef34a564af48c5b0cf0d617a65fd77f06c3eb1 Microsoft Analysis Services 客户端工具 15.0.19750.0 Microsoft 数据访问组件 (MDAC) …...
【5.20】四、性能测试—性能测试工具
目录 4.5 性能测试工具 4.5.1 LoadRunner 4.5.2 JMeter 4.5 性能测试工具 性能测试是软件测试中一个很重要的分支，人们为了提高性能测试的效率，开发出了很多性能测试工具。一款好的测试工具可以极大地提高测试效率，为发现软件缺陷提供重要…...
朗诵素材-《少年正是读书时》（两角色主持朗诵）
少年正是读书时 1、少年正是读书时 男：我们生活在/古老的土地上 男：我们拥有/共同的梦想 女：那朗朗的书声/那浓浓的墨香 女：都在告诉我们 合：少年正是／读书时 2、为何要读书 男：养心&am…...
凭借这个笔记，拿下8家大厂offer....
如何拿到多家大厂的offer，没有过硬的实力，就需要不断的学习。 我是如何拿到，阿里，腾讯，百度等八家大厂的offer的，今天我就给大家来分享我的秘密武器，阿里大神整理的包括，测试基础&am…...
介绍一下全链路压测平台的相关内容
随着互联网技术的不断发展，越来越多的企业开始依赖互联网来实现业务的发展和增长。而对于这些企业而言，如何保证他们的业务在高并发、高负载的情况下依然能够正常运行，是非常重要的一个问题。为了解决这个问题，企业可以使用全链路…...
对于无效的数据，该如何处理
一、无效数据的来源： 在进行数据管理时，无效数据是非常常见的问题。 无效数据可能来自于数据采集、输入错误、数据处理或存储错误等方面。 这些无效数据会对结果造成严重的影响，因此需要及时发现和处理。 二、处理无效数据： …...
港联证券：机器人行业有望迎来整体性机会 六氟磷酸锂翻倍上涨
表示，当前AI调整的时间空间已接近13年水位，且调整的促发因素有望缓和，后续可积极一些。一方面，13年三次调整时间在40日以内、幅度在15%以内。当前AI调整已持续1个月、幅度在10%以上，时空已接近历史。另一方面ÿ…...
css 伪类选择器 结构伪类
css 伪类选择器 结构伪类 常用的： :first-child 所有兄弟元素中的第一个 :last-child 所有兄弟元素中的最后一个 :nth-child(n) 所有兄弟元素中的第n个 :first-of-type 所有同类型兄弟元素中的第一个 :last-of-type 所有同类型兄弟元素中的最后一个 :nth-of-type(…...
常用的表格检测识别方法-表格区域检测方法（上）
常用的表格检测识别方法 表格检测识别一般分为三个子任务：表格区域检测、表格结构识别和表格内容识别。本章将围绕这三个表格识别子任务，从传统方法、深度学习方法等方面，综述该领域国内国外的发展历史和最新进展，并提供几个先进…...
【运维知识进阶篇】集群架构-Rewrite重定向
Rewrite主要实现url地址重写，以及重定向，就是把传入web的请求重定向到其他url的过程。 分以下几种场景使用 1、地址跳转，用户访问一个URL，将其定向到另一个URL 2、协议跳转，用户通过http协议请求网站时，…...
JavaScript如何使用while循环
JavaScript 中的 while 循环是一种常用的循环结构，用于在满足一定条件时重复执行一段代码块。while 循环会先检查条件是否为真，如果为真，则执行循环体中的代码，然后再次检查条件。当条件变为假时，循环会结束。 while(…...
『MySQL 实战 45 讲』16 - “order by” 是怎么工作的
“order by” 是怎么工作的 首先创建一个表 CREATE TABLE t ( id int(11) NOT NULL, city varchar(16) NOT NULL, name varchar(16) NOT NULL, age int(11) NOT NULL, addr varchar(128) DEFAULT NULL, PRIMARY KEY (id), KEY city (city) ) ENGINEInnoDB;全字段排序 在 cit…...
怎么给移动硬盘查错？移动硬盘查错能恢复数据吗
移动硬盘在长期使用或使用不当的情况下，可能会出现硬盘文件损坏或者出现坏道等问题，影响数据安全和文件操作。这时候，移动硬盘查错工具就派上用场了。它可以帮助用户发现移动硬盘中的问题，并且还可以对移动硬盘进行修复。 但是&a…...
javaIO流之缓冲流
目录 简介1、字节缓冲流1.1构造方法1.2缓冲流的高效1.3为什么字节缓冲流会这么快？1.4byte & 0xFF 2、字符缓冲流2.1构造方法2.2字符缓冲流特有方法 3、练习 简介 Java 的缓冲流是对字节流和字符流的一种封装，通过在内存中开辟缓冲区来提高 I/O 操作…...
定义制造业操作（定义 MES/MOM 系统）
制造业操作包含众多工厂级活动，涉及设备（定义、使用、时间表和维护）、材料（识别、属性、位置和状态）、人员（资格、可用性和时间表），以及这些资源与包含其信息碎片的众多系统之间的互…...
阻抗匹配原理与工程实践全解析
1. 阻抗匹配基础概念解析阻抗匹配是电子工程中最基础也最容易被忽视的技术要点之一。记得我刚入行时，第一次调试射频电路就栽在这个坑里——信号反射导致系统根本没法正常工作。阻抗匹配的本质，就是让信号源阻抗与负载阻抗达到共轭匹配状态，实…...
【毫米波混合波束成形】第8章 硬件不完美性与鲁棒AI设计
目录 第一部分：原理详解 8.1 低分辨率量化感知神经网络 8.1.1 1-bit与有限精度移相器建模 8.1.1.1 量化噪声的统计分布建模 8.1.1.1.1 量化感知训练（QAT）中的直通估计器原理与方差分析 8.1.1.1.2 软量化替代函数（Sigmoid/Tan…...
2026论文降AIGC保姆级指南：从80%降到10%，这5款降ai率工具亲测好用（附去AI味心法）
2026各校对AIGC越来越严格，但其实只要方法对，降下来也没那么难。 为了帮大家降低ai率，我把市面上的十几款主流降AI工具都试了一遍，今天这篇就给大家分享一下，如何在保留正常逻辑的前提下，将AI率降到学校要…...
# Excel模板转PDF合并单元格边框全乱了？逐个格子读取边线信息再还原
Excel模板转PDF合并单元格边框全乱了？逐个格子读取边线信息再还原 非科班野生程序员，深耕政务信息化20年。从VC到PB再到Java，自研框架browise也打磨了十几年。最近整理框架代码，发现不少有趣的决策，写出来和大家聊聊。…...
2025届学术党必备的十大AI论文平台实测分析
Ai论文网站排名（开题报告、文献综述、降aigc率、降重综合对比） TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 要使得文本的AIGC检出率能够有效降低，就得从语言风格、句法结构以及逻辑组织这三…...
单片机时序图解析与调试实战指南
1. 时序图基础认知第一次接触单片机编程时，看到芯片手册里那些密密麻麻的时序图，我的反应和大多数新手一样——完全看不懂那些高低起伏的波形到底在表达什么。直到有一次调试I2C通信失败，花了整整三天时间才意识到是时序不匹配导致的问题&…...
Untrunc视频修复工具：让损坏的MP4文件重获新生
Untrunc视频修复工具：让损坏的MP4文件重获新生 【免费下载链接】untrunc Restore a damaged (truncated) mp4, m4v, mov, 3gp video. Provided you have a similar not broken video. 项目地址: https://gitcode.com/gh_mirrors/unt/untrunc 当你熬夜剪辑完成…...
GCViewer扩展开发终极指南：自定义数据读取器与导出格式的完整教程
GCViewer扩展开发终极指南：自定义数据读取器与导出格式的完整教程 【免费下载链接】GCViewer Fork of tagtraum industries GCViewer. Tagtraum stopped development in 2008, I aim to improve support for Suns / Oracles java 1.6 garbage collector logs (inclu…...
调用约束)
向量嵌入性能骤降70%？EF Core 10 + ANN索引配置错误全解析，含官方未文档化AsVectorSearch()调用约束
第一章：向量嵌入性能骤降70%？EF Core 10 ANN索引配置错误全解析，含官方未文档化AsVectorSearch()调用约束当升级至 EF Core 10 并启用向量相似性搜索时，大量开发者报告 AsVectorSearch() 查询响应时间激增、QPS 下跌近 70%&#…...
小白程序员必看：收藏这份大模型学习指南（Agent/MCP全解析）
引言 – 随着生成式人工智能的兴起，“智能体（Intelligent Agent）”、“Agent”以及“Model Context Protocol (MCP)”这些名词频频出现。但它们之间的边界往往模糊：有人把 Agent 当作“智能体”，有人又提到 MCP 协议&a…...