js实现svg变色动画效果代码-html代码-BFW代码库

代码语言：html

代码描述：js实现svg变色动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        *, *::before, *::after {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
        
        :root {
          --color-fg: #0b0b0e;
          --color-fg-weaker: #696986;
          --color-fg-weakest: #8d8da5;
          --color-bg-weakest: #d7d7e0;
          --color-bg-weaker: #e0e0e6;
          --color-bg: #ebebef;
          --color-bg-stronger: #f6f6f8;
          --color-bg-strongest: white;
          --color-highlight: #8d8da5;
          --color-shadow: #0b0b0e;
          --color-accent-base: #00aaff;
          --color-accent-gradient-start: #00dfff;
          --color-accent-gradient-end: #0075ff;
          --color-accent-highlight: #33e6ff;
          --color-accent-shadow: #005ecc;
        }
        
        [data-theme=dark] {
          --color-fg: white;
          --color-fg-weaker: #8888a1;
          --color-fg-weakest: #656581;
          --color-bg-weakest: #2b2b36;
          --color-bg-weaker: #24242e;
          --color-bg: #1b1b22;
          --color-bg-stronger: #121217;
          --color-bg-strongest: #0b0b0e;
          --color-highlight: white;
          --color-shadow: #656581;
        }
        
        [data-accent-flavour=alt-a] {
          --color-accent-base: #14b84b;
          --color-accent-gradient-start: #14b829;
          --color-accent-gradient-end: #14b86d;
          --color-accent-highlight: #1ae633;
          --color-accent-shadow: #0f8a52;
        }
        
        [data-accent-flavour=alt-b] {
          --color-accent-base: #9159ff;
          --color-accent-gradient-start: #6e59ff;
          --color-accent-gradient-end: #b359ff;
          --color-accent-highlight: #ca8cff;
          --color-accent-shadow: #4126ff;
        }
        
        body {
          min-height: 100vh;
          min-width: 375px;
          padding: 18px;
          color: var(--color-fg);
          background: var(--color-bg);
          font-family: "Barlow", sans-serif;
          font-size: 14px;
        }
        
        svg.defs, svg[data-prep=true] {
          position: absolute;
          height: 0;
          width: 0;
        }
        
        .segmented-control {
          display: flex;
          width: 144px;
          height: 27px;
          grid-area: footer;
          align-self: end;
          justify-self: center;
          border-radius: 5px;
          background: var(--color-bg-stronger);
          z-index: 1;
          transition: all 0.1s ease-in-out;
        }
        .segmented-control input {
          position: absolute;
          transform: scale(0);
        }
        .segmented-control input:checked + label {
          color: inherit;
        }
        .segmented-control input:checked + label ~ label:last-child::before {
          transform: translate(-100%);
        }
        .segmented-control label {
          flex: 1 0 0px;
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
          padding-bottom: 2px;
          color: var(--color-fg-weaker);
          transition: all 0.1s ease-in-out;
          cursor: pointer;
        }
        .segmented-control label:hover {
          color: inherit;
        }
        .segmented-control label:last-child::before {
          content: "";
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          background-clip: padding-box;
          background-color: var(--color-bg-weaker);
          border-radius: 5px;
          border: 2px solid transparent;
          z-index: -1;
          transition: transform 0.25s ease-in-out, background-color 0.1s ease-in-out;
        }
        
        body {
          display: flex;
          justify-content: center;
          align-items: center;
          transition: all 0.1s ease-in-out;
        }
        
        svg {
          height: 100vmin;
          width: 100vmin;
          transition: all 0.1s ease-in-out;
          color: var(--color-highlight);
          fill: var(--color-shadow);
          stroke: var(--color-bg-strongest);
        }
        svg.accent {
          color: var(--color-accent-highlight);
          fill: var(--color-accent-shadow);
          stroke: var(--color-bg-strongest);
        }
    </style>


</head>

<body>
    <!-- logos --><svg class="defs" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 374 46"><defs><symbol id="framework" data-name="framework" viewBox="0 0 374 46"><g><rect x="232.53" y="0.89" width="10" height="44.13" rx="1.03"/><rect x="139.53" y="0.89" width="10" height="44.13" rx="1.03"/><path d="M251.53,33.3v-.77a1,1,0,0,1,1-1h7.5a1,1,0,0,1,1,1v.17c0,2.84,3.45,5.34,8.37,5.34,4.74,0,7.75-2.15,7.75-5,0-3.62-5.08-4.22-10.69-6.12-6.89-2.07-14.65-4.82-14.65-13.27,0-8.19,7.07-13.19,17.24-13.19,10.6,0,17.5,5.43,17.5,13.1a1,1,0,0,1-1,1h-7.24a1,1,0,0,1-1-1c0-2.84-3-5.26-8.19-5.26-4.48,0-7.58,1.64-7.58,4.74,0,3.54,4.74,4.4,10.6,6,7.15,2.07,15.08,4.74,15.08,13.36,0,8.27-7.07,13.1-17.67,13.1C258.51,45.54,251.53,40.28,251.53,33.3Z"/><path d="M212.53,2A22.87,22.87,0,0,0,196,2a18.54,18.54,0,0,0-5,2.93A18.7,18.7,0,0,0,186,2a22.87,22.87,0,0,0-16.5,0c-5.93,2.33-10,7.26-10,13.6V44a1,1,0,0,0,1,1h7.93a1,1,0,0,0,1-1V15.6c0-3.9,3.69-7.3,8.25-7.3S186,11.7,186,15.6V44a1,1,0,0,0,1,1H195a1,1,0,0,0,1-1V15.6c0-3.9,3.69-7.3,8.25-7.3s8.25,3.4,8.25,7.3V44a1,1,0,0,0,1,1h7.93a1,1,0,0,0,1-1V15.6C222.53,9.26,218.45,4.33,212.53,2Z"/><rect x="73" y="0.89" width="10" height="44.13" rx="1.03"/><path d="M53,2A22.87,22.87,0,0,0,36.5,2a18.54,18.54,0,0,0-5,2.93A18.54,18.54,0,0,0,26.5,2,22.87,22.87,0,0,0,10,2C4.07,4.33,0,9.26,0,15.6V44a1,1,0,0,0,1,1H9a1,1,0,0,0,1-1V15.6c0-3.9,3.69-7.3,8.25-7.3s8.25,3.4,8.25,7.3V44a1,1,0,0,0,1,1h7.94a1,1,0,0,0,1-1V15.6c0-3.9,3.69-7.3,8.25-7.3S53,11.7,53,15.6V44a1,1,0,0,0,1,1H62a1,1,0,0,0,1-1V15.6C63,9.26,58.93,4.33,53,2Z"/><path d="M119.5,2A22.87,22.87,0,0,0,103,2C97.07,4.33,93,9.26,93,15.6V44a1,1,0,0,0,1,1H102a1,1,0,0,0,1-1V15.6c0-3.9,3.69-7.3,8.25-7.3s8.25,3.4,8.25,7.3V44a1,1,0,0,0,1,1h7.94a1,1,0,0,0,1-1V15.6C129.5,9.26,125.43,4.33,119.5,2Z"/></g><g style="fill: currentcolor"><rect x="362.71" y="0.89" width="10" height="44.13" rx="1.03" /><path d=.........完整代码请登录后点击上方下载按钮下载查看