css 实现svg动态图标效果

效果演示:

 实现思路:主要是通过css的stroke相关属性来设置实现的。

 html代码:

 <svgt="1692441666814"class="icon"viewBox="0 0 1024 1024"version="1.1"xmlns="http://www.w3.org/2000/svg"p-id="12949"width="40"height="40"><pathclass="icon1"d="M689.036502 325.02992 334.416967 325.02992C324.54013 325.02992 316.556502 332.91472 316.556502 342.62992 316.556502 352.34512 324.54013 360.22992 334.416967 360.22992L689.036502 360.22992C698.895478 360.22992 706.896966 352.34512 706.896966 342.62992 706.896966 332.91472 698.895478 325.02992 689.036502 325.02992"fill="#9B9B9B"p-id="12950"></path><pathclass="icon1"d="M847.085546 454.2456C831.439776 488.3544 789.503405 508.3304 746.888336 488.988 721.508614 477.4776 709.631405 451.0072 707.738195 423.5336 707.113078 414.3816 699.361638 407.148 689.91345 407.148 680.465264 407.148 672.731683 414.3816 672.106566 423.5336 670.213357 451.0072 658.33615 477.4776 632.956429 488.988 579.071405 513.452 526.31159 475.0664 526.31159 424.748 526.31159 415.0328 518.310102 407.148 508.451126 407.148 499.002941 407.148 491.269357 414.3816 490.626381 423.5336 488.733171 451.0072 476.855962 477.4776 451.458381 488.988 397.609079 513.4344 344.849265 475.0488 344.849265 424.748 344.849265 415.0328 336.865637 407.148 326.9888 407.148 316.736893 407.148 308.503219 415.6664 309.181916 425.9272 310.289265 442.964 306.62787 460.212 294.089823 472.004 246.938195 516.3384 186.516242 494.884 168.816521 453.2072L167.798475 450.1448C166.85187 447.5928 166.048149 444.9704 165.423033 442.2952 163.297637 433.4248 163.976335 424.1848 166.780428 415.508 180.372242 373.2152 236.079033 200.1368 236.079033 200.1368 236.722009 198.1304 240.99066 195.1912 247.027498 195.1912L769.374659 195.1912C775.393638 195.1912 779.68015 198.1304 780.323126 200.1544L848.853731 410.404C853.515312 424.748 853.390288 440.5 847.085546 454.2456M738.154566 812.5112 285.284614 812.5112C263.602009 812.5112 245.938009 795.1048 245.938009 773.7208L245.938009 531.14C279.801451 528.1656 309.253358 509.9672 326.9888 483.3912 346.420986 512.484 379.802195 531.756 417.719963 531.756 455.637731 531.756 489.018941 512.484 508.451126 483.3912 527.883312 512.484 561.282381 531.756 599.182288 531.756 637.100054 531.756 670.481264 512.484 689.91345 483.3912 708.809824 511.6568 740.922941 530.5064 777.501171 531.5624L777.501171 773.7208C777.501171 795.1048 759.855034 812.5112 738.154566 812.5112M888.861171 429.9752C888.861171 427.4056 888.861171 421.8968 887.6288 417.6024 887.557357 417.3736 887.575219 417.1272 887.503776 416.8984L814.365171 189.5064C808.774848 172.1352 790.271405 159.9912 769.374659 159.9912L247.027498 159.9912C226.095033 159.9912 207.591591 172.1352 202.019125 189.5064L129.809265 416.9864C128.648335 422.7768 127.451684 431.4184 128.273265 435.9064 134.756614 477.6712 163.565544 513.276 203.072893 526.3528L203.072893 773.7208C203.072893 818.4072 239.954754 854.7512 285.284614 854.7512L738.154566 854.7512C783.484429 854.7512 820.38415 818.4072 820.38415 773.7208L820.38415 524.9448C860.516614 510.7064 888.861171 475.1192 888.861171 429.9752"fill="#9B9B9B"p-id="12951"></path></svg>

css代码:

.icon1 {/* 填充颜色 */fill: none;/* 图形元素的外轮廓颜色 */stroke: black;/* 图形元素的外轮廓宽度 */stroke-width: 10;/* 两端的形状 */stroke-linecap: round;}@keyframes move {0% {/* 指定线条的长度和间距,第一个参数为长度,第二个为间距 */stroke-dasharray: 0, 600px;}100% {stroke-dasharray: 600px, 0;}}.icon:hover {animation: move 1s;}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/99734.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据结构:栈和队列

文章目录 一、栈1.栈的概念及结构1.栈的概念及结构2.栈的实现 2.栈的顺序表实现1.栈的结构体和实现的功能函数2.栈的初始化&#xff0c;入栈和出栈操作3.栈的其他操作 3.栈的链表实现1.栈的结构体和实现的功能函数2.栈功能函数的实现 二、队列1.队列的概念及结构1.队列的概念及…

java面向对象——继承以及super关键字

继承的概念 1. 被继承的类称为父类&#xff08;超类&#xff09;&#xff0c;继承父类的类都称为子类&#xff08;派生类&#xff09; 2. 继承是指一个对象直接使用另一个对象的属性和方法&#xff0c;但是能继承非私有的属性和方法&#xff1b;(1) 构造方法不能被继承。(2) 但…

商城-学习整理-高级-商城业务-异步线程池(十三)

目录 一、线程1、初始化线程的 4 种方式2、线程池的七大参数3、线程池的运行流程&#xff1a;4、例子5、常见的 4 种线程池6、开发中为什么使用线程池 二、CompletableFuture 异步编排0、业务场景&#xff1a;1、创建异步对象2、计算完成时回调方法3、handle 方法4、线程串行化…

【无监督】6、SimSiam | 基于孪生网络的对比学习的成功源于梯度截断!

文章目录 一、背景二、方法三、效果 论文&#xff1a;Exploring Simple Siamese Representation Learning 出处&#xff1a;FAIR | 何恺明大佬 本文作者抛出了两个爆炸&#x1f4a5;性结论&#xff1a; 结论一&#xff1a;基于孪生网络的对比的学习的成功&#xff0c;不源于 …

亚马逊云科技 云技能孵化营——机器学习心得

亚马逊云科技 云技能孵化营机器学习心得 前言什么是机器学习&#xff1f;机器学习如何解决业务问题&#xff1f;什么时候适合使用机器学习模型&#xff1f;总结 前言 很荣幸参加了本次亚马逊云科技云技能孵化营&#xff0c;再本期的《亚马逊云科技云技能孵化营》中&#xff0c…

Leetcode-每日一题【剑指 Offer 33. 二叉搜索树的后序遍历序列】

题目 输入一个整数数组&#xff0c;判断该数组是不是某二叉搜索树的后序遍历结果。如果是则返回 true&#xff0c;否则返回 false。假设输入的数组的任意两个数字都互不相同。 参考以下这颗二叉搜索树&#xff1a; 5 / \ 2 6 / \ 1 3 示例 1&#xff1a; 输入: […

基于樽海鞘群算法优化的BP神经网络(预测应用) - 附代码

基于樽海鞘群算法优化的BP神经网络&#xff08;预测应用&#xff09; - 附代码 文章目录 基于樽海鞘群算法优化的BP神经网络&#xff08;预测应用&#xff09; - 附代码1.数据介绍2.樽海鞘群优化BP神经网络2.1 BP神经网络参数设置2.2 樽海鞘群算法应用 4.测试结果&#xff1a;5…

Flink内核源码解析--Flink中重要的工作组件和机制

Flink内核源码 1、掌握Flink应用程序抽象2、掌握Flink核心组件整体架构抽象3、掌握Flink Job三种运行模式4、理解Flink RPC网络通信框架Akka详解5、理解TaskManager为例子&#xff0c;分析Flink封装Akka Actor的方法和整个调用流程6、理解Flink高可用服务HighAvailabilityServ…

初识网络原理(笔记)

目录 ​编辑局域网 网络通信基础 IP 地址 端口号 协议 协议分层 TCP / IP 五层网络模型 网络数据传输的基本流程 发送方的情况&#xff1a; 接收方的情况 局域网 搭建网络的时候&#xff0c;需要用到 交换机 和 路由器 路由器上&#xff0c;有 lan 口 和 wan 口 虽…

基础恢复1-c语言

用书&#xff1a;c primer plus 学习时间&#xff1a;21-25 重点知识&#xff1a; 1.编译-链接-运行 编译&#xff1a;编译器将源码转换为可执行代码 链接&#xff1a;编译器从c库中获取标准例程放入源码中一同编译 运行&#xff1a;运行可执行文件 2.关键字 数据类型&…

Android oaid

官方GitHub地址 https://github.com/gzu-liyujiang/Android_CN_OAID 生成和用途介绍 https://www.jianshu.com/p/1c7ef27d6db4 图片来源于上述网站 其他关于id的介绍 https://www.cnblogs.com/chenKnowledgeConllection/p/17380960.html https://zhuanlan.zhihu.com/p/55…

分享图片 | 快速浏览网页资源,批量保存、一键分享图片

前言 小伙伴学习吉他&#xff0c;有时需要在互联网搜索曲谱资源&#xff0c;而多数曲谱均为图片&#xff0c;并且为多页&#xff0c;在电脑上显示练习很不方便&#xff0c;需要停下来点击鼠标进行翻页&#xff0c;影响练习的连贯性。 为了解决上述问题&#xff0c;通常把图片…

博客系统之单元测试

对博客系统进行单元测试 1、测试查找已存在的用户 测试名称 selectByUsernameTest01 测试源码 //查找用户&#xff0c;存在 Test public void selectByUsernameTest01 () { UserDao userDao new UserDao(); String ret1 userDao.selectByUsername("张三").toStr…

MYSQL完全卸载、安装与账号创建、权限控制

一、卸载mysql CentOS 卸载 MySQL 1. 查看安装情况 使用以下命令查看当前安装mysql情况&#xff0c;查找以前是否装有mysql rpm -qa|grep -i mysql这里显示我安装的 MySQL 服务有有&#xff1a; 2. 停止 mysql 服务、删除之前安装的 mysql 删除命令&#xff1a;rpm -e –n…

Eslint error, configuration for rule “import/no-cycle“ is invalid

可以参考stackoverflow.comEslint error, configuration for rule "import/no-cycle" is invalid他的意思是有个∞符号不支持&#xff0c;解决方案&#xff0c;把 eslint-plugin-import 的版本增加到 ^2.22.1&#xff0c;重新下载依赖包如&#xff1a;

学习笔记230804---restful风格的接口,delete的传参方式问题

如果后端提供的删除接口是restful风格&#xff0c;那么使用地址栏拼接的方式发送请求&#xff0c;数据放在主体中&#xff0c;后端接受不到&#xff0c;当然也还有一种可能&#xff0c;后端在这个接口的接参设置上是req.query接参。 问题描述 今天遇到的问题是&#xff0c;de…

(二)结构型模式:7、享元模式(Flyweight Pattern)(C++实例)

目录 1、享元模式&#xff08;Flyweight Pattern&#xff09;含义 2、享元模式的UML图学习 3、享元模式的应用场景 4、享元模式的优缺点 5、C实现享元模式的简单实例 1、享元模式&#xff08;Flyweight Pattern&#xff09;含义 享元模式&#xff08;Flyweight&#xff09…

常用系统命令

重定向 cat aa.txt > bbb.txt 将输出定向到bbb.txt cat aaa.txt >> bbb.txt 输出并追加查看进程 ps ps -ef 显示所有进程 例⼦&#xff1a;ps -ef | grep mysql |&#xff1a;管道符 kill pid 结束进程&#xff0c; 如 kill 3732&#xff1b;根据进程名结束进程可以先…

20英镑以上免费吗?英国亚马逊上调当日达订单免配送费门槛!

据外媒报道&#xff0c;英国亚马逊向Prime会员发送了一封电子邮件&#xff0c;通知他们从下个月开始必须为小额当日达订单支付运费。 亚马逊在向Prime用户发送的电子邮件中称&#xff0c;目前&#xff0c;其向符合条件的邮政编码内的Prime会员提供免费当日送达服务。 不过&am…

vue 实现图片懒加载

一&#xff1a;懒加载的目的 有些页面可能展示的是大量的图片&#xff0c;如果我们一次性加载所有图片就会浪费性能&#xff0c;影响用户体验&#xff0c;所以我们就会懒加载这些图片。即可视区域之外的图片不加载&#xff0c;随着页面的滚动&#xff0c;图片进入可视区域&…