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

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

    HTML：

    2. <ul class="milliaNav">
    3. <li class="active"><a href="#">
    4. <svg class="icon" viewBox="0 0 1024 1024">
    5.  
    7. <defs>
    8. <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
    9. <stop offset="0%" stop-color="#4a52ff" />
    10. <stop offset="100%" stop-color="#0c8bfe" />
    11. linearGradient>
    12. defs>
    14.  
    15. <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>
    16. <h6><span>首页span>h6>a>
    17. li>
    18. <li><a href="#">
    19. <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>
    20. <h6><span>短视频span>h6>a>
    21. li>
    22. <li><a href="#">
    23. <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>
    24. <h6><span>客服span>h6>a>
    25. li>
    26. <li><a href="#">
    27. <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>
    28. <h6><span>订单span>h6>a>
    29. li>
    30. <li><a href="#">
    31. <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>
    32. <h6><span>我的span>h6>a>
    33. li>
    34. ul>
    36.  
    37.  
    38.  
    40. <svg>
    41. <defs>
    42. <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
    43. <stop offset="0%" stop-color="#4a52ff" />
    44. <stop offset="100%" stop-color="#0c8bfe" />
    45. linearGradient>
    46. defs>
    47. <svg>

    CSS：

    1. /*navCss*/
    2. .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;}
    3. .milliaNav li,.milliaNav li a{display:flex;justify-content:center;flex-direction:column;}
    4. .milliaNav li h6{position:relative;font-size:3.6vw;font-weight:normal;}
    5. .milliaNav li .icon{fill:#bebebe;height:7vw;width:auto;margin-bottom:1vw;}
    6. .milliaNav li.active,.milliaNav li:hover{color:#0096ff}
    7. .milliaNav li.active .icon,.milliaNav li:hover .icon{fill:url(#gradient);}
    8. .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;}
    9. .milliaNav li.active h6 span,.milliaNav li:hover h6 span{color:#fff;}

     说明：

    2. <svg class="icon" viewBox="0 0 1024 1024">
    3.  
    5. <defs>
    6. <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
    7. <stop offset="0%" stop-color="#4a52ff" />
    8. <stop offset="100%" stop-color="#0c8bfe" />
    9. linearGradient>
    10. defs>
    12.  
    14. <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>
    15. svg>
    16.  
    17.  
    18.  
    19.  
    20.  
    21.  
    23. <svg class="icon" viewBox="0 0 1024 1024">
    24.  
    26. <defs>
    27. <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
    28. <stop offset="0%" stop-color="#4a52ff" />
    29. <stop offset="100%" stop-color="#0c8bfe" />
    30. linearGradient>
    31. defs>
    33.  
    35. <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>
    36. svg>
    38. <style>
    39. .xxx.active,.xxx:hover{fill:url(#gradient);}
    40. style>
    41.  
    42.  
    43.  
    44.  
    45.  
    47. <svg>
    48. <defs>
    49. <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
    50. <stop offset="0%" stop-color="#4a52ff" />
    51. <stop offset="100%" stop-color="#0c8bfe" />
    52. linearGradient>
    53. defs>
    54. <svg>
    56.  
    57.

    参考：

    SVG 线性渐变icon-default.png?t=N7T8https://www.w3school.com.cn/graphics/svg_grad_linear.asp

    SVG 径向渐变icon-default.png?t=N7T8https://www.w3school.com.cn/graphics/svg_grad_radial.asp

  • 相关阅读:
    2022年认证杯SPSSPRO杯数学建模A题(第二阶段)人员的紧急疏散求解全过程文档及程序
    串（KMP算法）
    UDS服务基础篇之14
    反射的作用、应用场景
    带上ES一起寻找理想的另一半
    基于Vue的前端UI组件库的比对和选型
    Linux内存管理（十六）：buddy 系统分配器之页面释放
    探究Socks5代理和代理IP在技术领域的多重应用
    大数据项目之电商数仓、业务数据介绍、电商系统表结构
    TDengine 入门教程⑧——数据库管理工具 | DBeaver 连接 TDengine
  • 原文地址：https://blog.csdn.net/millia/article/details/138175131