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 系统）
制造业操作包含众多工厂级活动，涉及设备（定义、使用、时间表和维护）、材料（识别、属性、位置和状态）、人员（资格、可用性和时间表），以及这些资源与包含其信息碎片的众多系统之间的互…...
日语AI面试高效通关秘籍：专业解读与青柚面试智能助攻
在如今就业市场竞争日益激烈的背景下，越来越多的求职者将目光投向了日本及中日双语岗位。但是，一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧？面对生疏的日语交流环境，即便提前恶补了…...
C++：std::is_convertible
C++标志库中提供is_convertible，可以测试一种类型是否可以转换为另一只类型： template <class From, class To> struct is_convertible; 使用举例： #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...
【Java学习笔记】Arrays类
Arrays 类 1. 导入包：import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序（自然排序和定制排序）Arrays.binarySearch()通过二分搜索法进行查找（前提：数组是…...
使用分级同态加密防御梯度泄漏
抽象 联邦学习 （FL） 支持跨分布式客户端进行协作模型训练，而无需共享原始数据，这使其成为在互联和自动驾驶汽车 （CAV） 等领域保护隐私的机器学习的一种很有前途的方法。然而，最近的研究表明&…...
学习STC51单片机31（芯片为STC89C52RCRC）OLED显示屏1
每日一言 生活的美好，总是藏在那些你咬牙坚持的日子里。 硬件：OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写，"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...
python如何将word的doc另存为docx
将 DOCX 文件另存为 DOCX 格式（Python 实现） 在 Python 中，你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是，.doc 是旧的 Word 格式，而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...
【开发技术】.Net使用FFmpeg视频特定帧上绘制内容
目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法，当前调用一个医疗行业的AI识别算法后返回…...
iview框架主题色的应用
1.下载 less要使用3.0.0以下的版本 npm install less2.7.3 npm install less-loader4.0.52./src/config/theme.js文件 module.exports {yellow: {theme-color: #FDCE04},blue: {theme-color: #547CE7} }在sass中使用theme配置的颜色主题，无需引入，直接可…...
【Android】Android 开发 ADB 常用指令
查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...
毫米波雷达基础理论（3D+4D）
3D、4D毫米波雷达基础知识及厂商选型 PreView : https://mp.weixin.qq.com/s/bQkju4r6med7I3TBGJI_bQ 1. FMCW毫米波雷达基础知识 主要参考博文： 一文入门汽车毫米波雷达基本原理 ：https://mp.weixin.qq.com/s/_EN7A5lKcz2Eh8dLnjE19w 毫米波雷达基础…...