svg图标填充渐变色及CSS鼠标悬停纯色渐变色转换

news2024/11/15 6:35:44

 svg图标填充渐变色及CSS鼠标悬停纯色渐变色转换:

HTML:

<!--底部导航-->
<ul class="milliaNav">
<li class="active"><a href="#">
<svg class="icon" viewBox="0 0 1024 1024">

<!--当前导航active渐变色设置可以放在任意svg内部-->
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#4a52ff" />
<stop offset="100%" stop-color="#0c8bfe" />
</linearGradient>
</defs>
<!--当前导航active渐变色设置结束-->

<path d="M605.866667 981.333333v-234.666666c0-51.84-33.621333-93.866667-75.093334-93.866667h-37.546666c-41.472 0-75.093333 42.026667-75.093334 93.866667V981.333333H268.672A85.333333 85.333333 0 0 1 183.466667 896.341333V512h657.066666v384.341333c0 46.933333-38.186667 84.992-85.205333 84.992H605.866667zM185.130667 511.786667H89.6a46.933333 46.933333 0 0 1-29.013333-83.882667l422.4-375.210667a46.933333 46.933333 0 0 1 58.026666 0l422.357334 375.466667a46.933333 46.933333 0 0 1-29.013334 83.84l-90.709333-0.213333H185.173333z"></path></svg>
<h6><span>首页</span></h6></a>
</li>
<li><a href="#">
<svg class="icon" viewBox="0 0 1024 1024"><path d="M64.67 512c2.03-148.27 27.78-271.04 103.07-344.26C240.96 92.45 363.73 66.7 512 64.67c148.27 2.03 271.04 27.78 344.26 103.07C931.55 240.96 957.3 363.73 959.33 512c-2.03 148.27-27.78 271.04-103.07 344.26C783.04 931.55 660.27 957.3 512 959.33c-148.27-2.03-271.04-27.78-344.26-103.07C92.45 783.04 66.7 660.27 64.67 512z" p-id="39514"></path><path d="M676.18 470.84l-243-135.24c-31.39-17.47-70 5.23-70 41.16v270.48c0 35.93 38.61 58.63 70 41.16l243-135.24c32.26-17.96 32.26-64.36 0-82.32z" fill="#FFFFFF" p-id="39515"></path></svg>
<h6><span>短视频</span></h6></a>
</li>
<li><a href="#">
<svg class="icon" viewBox="0 0 1024 1024"><path d="M855.466667 200.533333C765.866667 110.933333 640 59.733333 514.133333 64c-130.133333-2.133333-256 46.933333-345.6 136.533333-83.2 85.333333-128 196.266667-125.866666 311.466667 0 78.933333 21.333333 155.733333 57.6 221.866667l-29.866667 87.466666c-10.666667 32-4.266667 66.133333 19.2 91.733334 19.2 21.333333 42.666667 32 70.4 32 6.4 0 10.666667 0 17.066667-2.133334l132.266666-23.466666c61.866667 27.733333 130.133333 40.533333 200.533334 40.533333h10.666666c125.866667 0 245.333333-49.066667 332.8-136.533333 85.333333-85.333333 130.133333-196.266667 125.866667-311.466667 4.266667-117.333333-40.533333-226.133333-123.733333-311.466667zM512 746.666667c-132.266667 0-238.933333-104.533333-238.933333-234.666667 0-23.466667 19.2-42.666667 42.666666-42.666667s42.666667 19.2 42.666667 42.666667c0 83.2 68.266667 149.333333 153.6 149.333333s153.6-66.133333 153.6-149.333333c0-23.466667 19.2-42.666667 42.666667-42.666667s42.666667 19.2 42.666666 42.666667c0 130.133333-106.666667 234.666667-238.933333 234.666667z"></path></svg>
<h6><span>客服</span></h6></a>
</li>
<li><a href="#">
<svg class="icon" viewBox="0 0 1024 1024"><path d="M621.7088 164.5696H402.2912c-45.44 0-82.2912-36.8384-82.2912-82.2912C320 36.8384 356.8384 0 402.2912 0h219.4304C667.1616 0 704 36.8384 704 82.2912c0 45.44-36.8384 82.2784-82.2912 82.2784z"></path><path d="M857.6 64h-125.7856a95.63264 95.63264 0 0 1 5.4784 32c0 53.0176-42.9824 96-96 96h-256c-53.0176 0-96-42.9824-96-96 0-11.2256 1.9456-21.9904 5.4784-32H166.4c-56.5504 0-102.4 45.8496-102.4 102.4v755.2c0 56.5504 45.8496 102.4 102.4 102.4h691.2c56.5504 0 102.4-45.8496 102.4-102.4V166.4c0-56.5504-45.8496-102.4-102.4-102.4z m-83.9168 622.08c0 28.2752-22.9248 51.2-51.2 51.2H301.5168c-28.2752 0-51.2-22.9248-51.2-51.2s22.9248-51.2 51.2-51.2h420.9792c28.2752 0 51.1872 22.9248 51.1872 51.2z m0-230.4c0 28.2752-22.9248 51.2-51.2 51.2H301.5168c-28.2752 0-51.2-22.9248-51.2-51.2s22.9248-51.2 51.2-51.2h420.9792c28.2752 0 51.1872 22.9248 51.1872 51.2z"></path></svg>
<h6><span>订单</span></h6></a>
</li>
<li><a href="#">
<svg class="icon" viewBox="0 0 1024 1024"><path d="M598.9 557.7H424.7c-162 0-293.7 133.6-293.7 297.8v17.7C131 959 260.6 959 424.7 959h174.2c157.6 0 293.7 0 293.7-85.9v-17.7c0-164.1-131.7-297.7-293.7-297.7zM503.1 63c-128.2 0-232.6 105.9-232.6 236s104.3 236 232.6 236c128.2 0 232.6-105.9 232.6-236S631.3 63 503.1 63z"></path></svg>
<h6><span>我的</span></h6></a>
</li>
</ul>
<!--底部导航结束-->



<!--当前导航active渐变色设置 渐变配置也可以单独放但是会占空间 需放置在单独svg内-->
<svg>
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#4a52ff" />
<stop offset="100%" stop-color="#0c8bfe" />
</linearGradient>
</defs>
<svg>
<!--当前导航active渐变色设置结束-->

CSS:

/*navCss*/
.milliaNav{position:fixed;left:0;bottom:0;width:100%;display:flex;align-items:center;justify-content:space-evenly;background:#fff;padding:3vw 0;z-index:999;}
.milliaNav li,.milliaNav li a{display:flex;justify-content:center;flex-direction:column;}
.milliaNav li h6{position:relative;font-size:3.6vw;font-weight:normal;}
.milliaNav li .icon{fill:#bebebe;height:7vw;width:auto;margin-bottom:1vw;}
.milliaNav li.active,.milliaNav li:hover{color:#0096ff}
.milliaNav li.active .icon,.milliaNav li:hover .icon{fill:url(#gradient);}
.milliaNav li.active h6:after,.milliaNav li:hover h6:after{content:"";display:block;position:absolute;left:50%;bottom:1vw;width:2vw;height:2vw;border-radius:4vw;background:#0096ff;margin-left:-1vw;}
.milliaNav li.active h6 span,.milliaNav li:hover h6 span{color:#fff;}

 说明:

<!--直接应用-->
<svg class="icon" viewBox="0 0 1024 1024">

<!--渐变色设置 注:id="gradient"-->
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#4a52ff" />
<stop offset="100%" stop-color="#0c8bfe" />
</linearGradient>
</defs>
<!--渐变色设置结束-->

<!--path中使用渐变  注:fill="url(#gradient)"-->
<path fill="url(#gradient)" d="M605.866667 981.333333v-234.666666c0-51.84-33.621333-93.866667-75.093334-93.866667h-37.546666c-41.472 0-75.093333 42.026667-75.093334 93.866667V981.333333H268.672A85.333333 85.333333 0 0 1 183.466667 896.341333V512h657.066666v384.341333c0 46.933333-38.186667 84.992-85.205333 84.992H605.866667zM185.130667 511.786667H89.6a46.933333 46.933333 0 0 1-29.013333-83.882667l422.4-375.210667a46.933333 46.933333 0 0 1 58.026666 0l422.357334 375.466667a46.933333 46.933333 0 0 1-29.013334 83.84l-90.709333-0.213333H185.173333z"></path>
</svg>






<!--结合css控制-->
<svg class="icon" viewBox="0 0 1024 1024">

<!--渐变色设置 注:id="gradient"-->
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#4a52ff" />
<stop offset="100%" stop-color="#0c8bfe" />
</linearGradient>
</defs>
<!--渐变色设置结束-->

<!--path中不设置fill 多色除外-->
<path d="M605.866667 981.333333v-234.666666c0-51.84-33.621333-93.866667-75.093334-93.866667h-37.546666c-41.472 0-75.093333 42.026667-75.093334 93.866667V981.333333H268.672A85.333333 85.333333 0 0 1 183.466667 896.341333V512h657.066666v384.341333c0 46.933333-38.186667 84.992-85.205333 84.992H605.866667zM185.130667 511.786667H89.6a46.933333 46.933333 0 0 1-29.013333-83.882667l422.4-375.210667a46.933333 46.933333 0 0 1 58.026666 0l422.357334 375.466667a46.933333 46.933333 0 0 1-29.013334 83.84l-90.709333-0.213333H185.173333z"></path>
</svg>
<!--css部分配置fill 注:fill:url(#gradient)-->
<style>
.xxx.active,.xxx:hover{fill:url(#gradient);}
</style>





<!--渐变配置也可以单独放但是会占空间 需放置在单独svg内-->
<svg>
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#4a52ff" />
<stop offset="100%" stop-color="#0c8bfe" />
</linearGradient>
</defs>
<svg>
<!--渐变色设置结束-->


参考:

SVG 渐变 - 线性

SVG 渐变- 放射性

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

06.JAVAEE之线程4

1.定时器 1.1 定时器是什么 定时器也是软件开发中的一个重要组件. 类似于一个 " 闹钟 ". 达到一个设定的时间之后 , 就执行某个指定好的代码. 约定一个时间,时间到达之后,执行某个代码逻辑, 定时器非常常见,尤其是在进行网络通信的时候, 需要有等待的最大时间&…

xilinx Mailbox 中的ipi message地址计算方式

适用于openAmp mailbox ipi id对应的ipi message地址计算方式 官方openamp硬件配置解析 OpenAMP Base Hardware Configurations - Xilinx Wiki - Confluence openamp官方设备树 meta-openamp/meta-xilinx-tools/recipes-bsp/device-tree/files/zynqmp-openamp.dtsi at rel-v2…

政安晨:【Keras机器学习示例演绎】(十四)—— 用于弱光图像增强的零 DCE

目录 简介 下载 LOL 数据集 创建 TensorFlow 数据集 零 DCE 框架 了解光线增强曲线 DCE-Net 损失函数 色彩恒定损失 曝光损失 光照平滑度损失 空间一致性损失 深度曲线估计模型 训练 推论 测试图像推理 政安晨的个人主页&#xff1a;政安晨 欢迎 &#x1f44d;点…

遥感卫星影像地表温度反演

近年来&#xff0c;随着遥感技术的不断发展和卫星遥感数据的广泛应用&#xff0c;遥感卫星地表温度反演成为了地球科学和环境监测领域的重要研究内容。地表温度反演是指利用遥感卫星数据推算地表温度的过程&#xff0c;其原理基于地物表面的辐射特征与温度之间的关系。本文将介…

Github2024-04-25 开源项目日报Top10

根据Github Trendings的统计,今日(2024-04-25统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Python项目4非开发语言项目2TypeScript项目2PowerShell项目1C++项目1Dart项目1JavaScript项目1GPT4All: 在边缘运行开源大型语言模型 创建周期:…

C++:拷贝构造函数的初始化列表

拷贝构造函数的初始化列表是在拷贝构造函数的定义中出现的一组初始值&#xff0c;用于初始化新创建的对象的成员变量。它的语法是在构造函数的声明后面使用冒号&#xff08;:&#xff09;来开头&#xff0c;然后列出要初始化的成员变量和它们的初始值。初始化列表的优点在于它允…

从国内盲盒小程序看国外市场的发展机遇与挑战

近年来&#xff0c;盲盒小程序在国内市场迅速崛起&#xff0c;凭借其独特的营销模式和消费者体验&#xff0c;赢得了大量年轻消费者的喜爱。从国内盲盒小程序的发展中&#xff0c;我们可以窥见国外市场的一些发展机遇与挑战&#xff0c;为进军国际市场提供有益的参考。 首先&a…

[Swift]单元测试

编写单元测试是确保你的代码质量和功能正确性的重要步骤 一、编写单元测试的详细流程 1. 创建一个新的Xcode项目 如果你尚未创建一个项目&#xff0c;首先你需要在Xcode中创建一个新的iOS项目&#xff1a; 打开Xcode&#xff0c;选择“File” > “New” > “Project”…

ARM DMIPS算力说明

ARM DMIPS算力说明 ARM算力参考官网地址 https://en.wikipedia.org/wiki/List_of_ARM_processors Product familyARM architectureProcessorFeatureCache (I / D), MMUTypical MIPS MHzReferenceARM1ARMv1ARM1First implementationNoneARM2ARMv2ARM2ARMv2 added the MUL (mu…

一文带你了解MySQL的DCL语句

文章目录 ☃️DCL☃️管理用户☃️权限控制☃️DCL的重要性 欢迎来到 请回答1024 的博客 &#x1f34e;&#x1f34e;&#x1f34e;欢迎来到 请回答1024的博客 关于博主&#xff1a; 我是 请回答1024&#xff0c;一个追求数学与计算的边界、时间与空间的平衡&#xff0c;0与1的…

【MySQL】A01、性能优化-结构设计与配置

1、数据库设计原则 1.1、核心原则 不在数据库做运算; cpu计算务必移至业务层; 控制列数量(字段少而精,字段数建议在20以内); 平衡范式与冗余(效率优先&#xff1b;往往牺牲范式) 拒绝3B(拒绝大sql语句&#xff1a;big sql、拒绝大事务&#xff1a;big transaction、拒绝大…

【漏洞复现】Palo Alto Networks PAN-OS GlobalProtect 命令注入漏洞 CVE-2024-3400

漏洞描述 Palo Alto Networks PAN-OS GlobalProtect 命令 Palo Alto Networks PAN-OS GlobalProtect 是Palo Alto Networks 的一款防火墙产品。2024年4月12日,官方披露CVE-2024-3400 Palo Alto Networks GlobalProtect 命令注入漏洞。在特定PAN-OS版本和不同功能配置下,未经…

618哪些好物值得入手?收下这份必买清单!

很快618就要来啦&#xff0c;在这之前一定要好好做攻略。在这个特别的时刻&#xff0c;我们不仅有机会淘到心仪已久的商品&#xff0c;还能享受到超值的折扣和优惠。为了让大家的购物体验更加愉快&#xff0c;我特意整理了一份618必买清单&#xff0c;里面汇聚了各类热门好物&a…

【算法入门-Python】02_递归

一、递归 递归的两个特点&#xff1a;调用自身&#xff1b;结束条件。 def func1(x):print(x)func1(x-1)没有结束条件&#xff0c;si递归。不是递归。 def func2(x)&#xff1a;if x > 0:print(x)func2(x1)递归调用的x1&#xff0c;没有结束条件。不是递归 def func3(x)…

2024最新版本FL Studio21水果编曲软件破解版激活许可证

FL Studio 21水果编曲软件适合广泛的人群使用&#xff0c;包括但不限于以下几类人&#xff1a; 音乐制作人&#xff1a;对于专业的音乐制作人来说&#xff0c;FL Studio 21提供了全面的音乐制作工具和功能&#xff0c;能够满足他们在音乐创作、编曲、混音等方面的需求。他们可以…

VUE父组件向子组件传递值

创作灵感 最近在写一个项目时&#xff0c;遇到了这样的一个需求。我封装了一个组件&#xff0c;这个组件需要被以下两个地方使用&#xff0c;一个是搜索用户时用到&#xff0c;一个是修改用户信息时需要用到。其中&#xff0c;在搜索用户时&#xff0c;可以根据姓名或者账号进…

Git TortoiseGit 详细安装使用教程

前言 Git 是一个免费的开源分布式版本控制系统&#xff0c;是用来保存工程源代码历史状态的命令行工具&#xff0c;旨在处理从小型到非常大型的项目&#xff0c;速度快、效率高。《请查阅Git详细说明》。TortoiseGit 是 Git 的 Windows Shell 界面工具&#xff0c;基于 Tortoi…

Mybatis入门(入门案例,IDEA配置SQL提示,JDBC介绍,lombok介绍)

目录 一、Mybatis入门案例介绍整体步骤创建SpringBoot项目pom依赖准备测试数据新建实体类配置Mybatis数据库连接信息新建接口类,编写SQL代码单元测试 二、IDEA配置SQL提示三、JDBC是什么案例JDBC和Mybatis对比 四、数据库连接池介绍如何实现一个数据库连接池切换数据库连接池 五…

【SpringCloud】LoadBalance负载均衡服务调用快速入门

【SpringCloud】LoadBalance负载均衡服务调用快速入门 文章目录 【SpringCloud】LoadBalance负载均衡服务调用快速入门1. 概述2. 引入依赖3. 配置、验证3.1 配置3.2 验证 1. 概述 官网地址&#xff1a;点击跳转 Spring Cloud LoadBalancer 是由 SpringCloud 官方提供的一个开…

自动化测试用例设计

知人者智&#xff0c;自知者明。大家好&#xff0c;给大家分享一下关于自动化测试用例的设计心得&#xff0c;首先完整的熟悉业务是第一步要做的&#xff0c;不熟悉业务的前提下不会设计出高效且合理的用例&#xff0c;其次是我们要有明确的测试目标&#xff0c;确保我们写的每…