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 系统）
制造业操作包含众多工厂级活动，涉及设备（定义、使用、时间表和维护）、材料（识别、属性、位置和状态）、人员（资格、可用性和时间表），以及这些资源与包含其信息碎片的众多系统之间的互…...
变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析
一、变量声明设计：let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性，这种设计体现了语言的核心哲学。以下是深度解析： 1.1 设计理念剖析 安全优先原则：默认不可变强制开发者明确声明意图 let x 5; …...
如何在看板中体现优先级变化
在看板中有效体现优先级变化的关键措施包括：采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中，设置任务排序规则尤其重要，因为它让看板视觉上直观地体…...
（二）TensorRT-LLM | 模型导出（v0.20.0rc3）
0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述，后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作，其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...
高防服务器能够抵御哪些网络攻击呢？
高防服务器作为一种有着高度防御能力的服务器，可以帮助网站应对分布式拒绝服务攻击，有效识别和清理一些恶意的网络流量，为用户提供安全且稳定的网络环境，那么，高防服务器一般都可以抵御哪些网络攻击呢？下面…...
css3笔记 （1） 自用
outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size：0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格ÿ…...
【无标题】路径问题的革命性重构：基于二维拓扑收缩色动力学模型的零点隧穿理论
路径问题的革命性重构：基于二维拓扑收缩色动力学模型的零点隧穿理论 一、传统路径模型的根本缺陷 在经典正方形路径问题中（图1）： mermaid graph LR A((A)) --- B((B)) B --- C((C)) C --- D((D)) D --- A A -.- C[无直接路径] B -…...
mac：大模型系列测试
0 MAC 前几天经过学生优惠以及国补17K入手了mac studio,然后这两天亲自测试其模型行运用能力如何，是否支持微调、推理速度等能力。下面进入正文。 1 mac 与 unsloth 按照下面的进行安装以及测试，是可以跑通文章里面的代码。训练速度也是很快的。 注意…...
DiscuzX3.5发帖json api
参考文章：PHP实现独立Discuz站外发帖(直连操作数据库)_discuz 发帖api-CSDN博客 简单改造了一下，适配我自己的需求 有一个站点存在多个采集站，我想通过主站拿标题，采集站拿内容 使用到的sql如下 CREATE TABLE pre_forum_post_…...
【WebSocket】SpringBoot项目中使用WebSocket
1. 导入坐标 如果springboot父工程没有加入websocket的起步依赖，添加它的坐标的时候需要带上版本号。 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId> </dep…...
webpack面试题
面试题：webpack介绍和简单使用 一、webpack（模块化打包工具）1. webpack是把项目当作一个整体，通过给定的一个主文件，webpack将从这个主文件开始找到你项目当中的所有依赖文件，使用loaders来处理它们&#x…...