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 系统）
制造业操作包含众多工厂级活动，涉及设备（定义、使用、时间表和维护）、材料（识别、属性、位置和状态）、人员（资格、可用性和时间表），以及这些资源与包含其信息碎片的众多系统之间的互…...
[2025CVPR]DeepVideo-R1：基于难度感知回归GRPO的视频强化微调框架详解
突破视频大语言模型推理瓶颈，在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 安全措施依赖问题 GRPO使用min和clip函数限制策略更新幅度，导致： 梯度抑制：当新旧策略差异过大时梯度消失收敛困难：策略无法充分优化# 传统GRPO的梯…...
)
Java 语言特性(面试系列1)
一、面向对象编程 1. 封装（Encapsulation） 定义：将数据（属性）和操作数据的方法绑定在一起，通过访问控制符（private、protected、public）隐藏内部实现细节。示例： public …...
【入坑系列】TiDB 强制索引在不同库下不生效问题
文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1：执行计划绑定问题？尝试：SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库，并对 SQL 进行优化了，添加了强制索引。 UAT 环境已经生效，但 PROD 环境强制索…...
QMC5883L的驱动
简介 本篇文章的代码已经上传到了github上面，开源代码 作为一个电子罗盘模块，我们可以通过I2C从中获取偏航角yaw，相对于六轴陀螺仪的yaw，qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...
基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能，多端兼容
基于 UniApp + WebSocket实现多端兼容的实时通讯系统，涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能，适配微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...
Linux相关概念和易错知识点（42）（TCP的连接管理、可靠性、面临复杂网络的处理）
目录 1.TCP的连接管理机制（1）三次握手①握手过程②对握手过程的理解 （2）四次挥手（3）握手和挥手的触发（4）状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...
SiFli 52把Imagie图片，Font字体资源放在指定位置，编译成指定img.bin和font.bin的问题
分区配置 (ptab.json) img 属性介绍： img 属性指定分区存放的 image 名称，指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件，则以 proj_name:binary_name 格式指定文件名， proj_name 为工程 名&…...
【网络安全】开源系统getshell漏洞挖掘
审计过程： 在入口文件admin/index.php中： 用户可以通过m,c,a等参数控制加载的文件和方法，在app/system/entrance.php中存在重点代码： 当M_TYPE system并且M_MODULE include时，会设置常量PATH_OWN_FILE为PATH_APP.M_T…...
Python 实现 Web 静态服务器（HTTP 协议）
目录 一、在本地启动 HTTP 服务器1. Windows 下安装 node.js1）下载安装包2）配置环境变量3）安装镜像4）node.js 的常用命令 2. 安装 http-server 服务3. 使用 http-server 开启服务1）使用 http-server2）详解 …...
Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement
Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement 1. LAB环境2. L2公告策略2.1 部署Death Star2.2 访问服务2.3 部署L2公告策略2.4 服务宣告 3. 可视化 ARP 流量3.1 部署新服务3.2 准备可视化3.3 再次请求 4. 自动IPAM4.1 IPAM Pool4.2 …...