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 系统）
制造业操作包含众多工厂级活动，涉及设备（定义、使用、时间表和维护）、材料（识别、属性、位置和状态）、人员（资格、可用性和时间表），以及这些资源与包含其信息碎片的众多系统之间的互…...
设计模式和设计原则回顾
设计模式和设计原则回顾 23种设计模式是设计原则的完美体现，设计原则设计原则是设计模式的理论基石， 设计模式 在经典的设计模式分类中（如《设计模式：可复用面向对象软件的基础》一书中），总共有23种设计模式，分为三大类： 一、创建型模式（5种） 1. 单例模式（Sing…...
（二）TensorRT-LLM | 模型导出（v0.20.0rc3）
0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述，后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作，其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...
Neo4j 集群管理：原理、技术与最佳实践深度解析
Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档，本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石，用于构建高可用、可扩展且一致的图数据库服务…...
ardupilot 开发环境eclipse 中import 缺少C++
目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++，无法导入ardupilot代码，会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...
稳定币的深度剖析与展望
一、引言 在当今数字化浪潮席卷全球的时代，加密货币作为一种新兴的金融现象，正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而，加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下，稳定…...
安全突围：重塑内生安全体系：齐向东在2025年BCS大会的演讲
文章目录 前言第一部分：体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分：体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...
并发编程 - go版
1.并发编程基础概念 进程和线程 A. 进程是程序在操作系统中的一次执行过程，系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…...
[ACTF2020 新生赛]Include 1(php://filter伪协议)
题目 做法 启动靶机，点进去 点进去 查看URL，有 ?fileflag.php说明存在文件包含，原理是php://filter 协议 当它与包含函数结合时，php://filter流会被当作php文件执行。 用php://filter加编码，能让PHP把文件内容…...
比较数据迁移后MySQL数据库和OceanBase数据仓库中的表
设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程，两张表是相同的结构，都有整型主键id字段，需要每次从数据库分批取得2000条数据，用于比较，比较操作的同时可以再取2000条数据，等上一次比较完成之后，开始比较，直到比较完所有的数据。比较操作需要比较…...
PHP 8.5 即将发布：管道操作符、强力调试
前不久，PHP宣布了即将在 2025 年 11 月 20 日 正式发布的 PHP 8.5！作为 PHP 语言的又一次重要迭代，PHP 8.5 承诺带来一系列旨在提升代码可读性、健壮性以及开发者效率的改进。而更令人兴奋的是，借助强大的本地开发环境 ServBay&am…...