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

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

代码语言：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 {
          heig.........完整代码请登录后点击上方下载按钮下载查看