css+js实现可配置参数的图标轮播轮换切换动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：css+js实现可配置参数的图标轮播轮换切换动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
  
  
  
<style>
@import url('//repo.bfw.wiki/bfwrepo/css/open-props.normalize.min.css') layer(normalize);

@layer normalize, base, demo, loops, explode;

@layer explode {
  main,
  ul:first-of-type {
    transform-style: preserve-3d;
  }
  ul {
    transition: opacity 0.5s 1.5s;
  }
  [data-marker] {
    outline: 2px dashed hsl(0 100% 50% / 0.8);
    opacity: 0;
    outline-offset: 2px;
  }
  [data-explode='false'] {
    main {
      transition: transform 0.5s 0.5s;
    }
    [data-logo],
    [data-marker] {
      transition: opacity 0.5s, transform 0.5s;
    }
    main ul:first-of-type {
      transition: translate 0.5s 1s;
    }
  }

  [data-explode='true'] {
    /* transitions */
    main {
      transition: transform 0.5s 1s;
    }
    [data-logo],
    [data-marker] {
      transition: opacity 0.5s 1.5s, transform 0.5s 1.5s;
    }
    main ul:first-of-type {
      transition: translate 0.5s 0.5s;
    }
    ul {
      transition: opacity 0.5s;
    }

    [data-marker] {
      opacity: 1;
    }
    main ul:not(:first-of-type) {
      opacity: 0;
    }
    main {
      transform: rotateX(24deg) rotateY(-45deg);
    }
    main ul:first-of-type {
      translate: calc(150% + 6rem) 0;
    }
    main [data-logo] {
      -webkit-animation-name: appear;
              animation-name: appear;
      -webkit-animation-duration: calc(var(--duration) * 1s);
              animation-duration: calc(var(--duration) * 1s);
      -webkit-animation-fill-mode: both;
              animation-fill-mode: both;
      -webkit-animation-iteration-count: infinite;
              animation-iteration-count: infinite;
      -webkit-animation-delay: calc(
        (var(--duration) / var(--items)) * (var(--items) - var(--i)) * -1s +
          (var(--base-delay) * 1s)
      );
              animation-delay: calc(
        (var(--duration) / var(--items)) * (var(--items) - var(--i)) * -1s +
          (var(--base-delay) * 1s)
      );
      transform-style: preserve-3d;
      filter: blur(0px) !important;
    }
    [data-logo],
    [data-marker] {
      transform: translate3d(0, 0, calc((var(--i) - 1) * 4rem));
    }
    use {
      -webkit-animation: none;
              animation: none;
    }
    ul:first-of-type [data-logo] {
      --opacity: 0.25;
    }
    ul:first-of-type use {
      opacity: 1 !important;
    }
  }
}

@layer loops {
  /*
    this is where it gets "technical"
    if you have say 5 items to loop, each one gets 20% of the keyframe, right?
    but how do you get the overlap?
  */
  :root {
    --duration: 30;
  }

  ul {
    --base-delay: calc(
      sin((var(--index) / var(--lists)) * 45deg) * var(--stagger, 0)
    );
  }

  [data-logo] use {
    -webkit-animation-name: appear;
            animation-name: appear;
    -webkit-animation-duration: calc(var(--duration) * 1s);
            animation-duration: calc(var(--duration) * 1s);
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-delay: calc(
      (var(--duration) / var(--items)) * (var(--items) - var(--i)) * -1s +
        (var(--base-delay) * 1s)
    );
            animation-delay: calc(
      (var(--duration) / var(--items)) * (var(--items) - var(--i)) * -1s +
        (var(--base-delay) * 1s)
    );
    mix-blend-mode: hard-light;
    transform-box: fill-box;
  }
  [data-logo] svg {
    overflow: visible !important;
    height: 3rem;
  }
}

@layer demo {
  main {
    display: flex;
    flex-wrap: wrap;
    gap: 4rem;
    justify-content: center;
  }
  ul {
    width: 100px;
    /* outline: 2px dashed color-mix(in hsl, canvasText, #0000);
    outline-offset: 2px; */
    display: grid;
    grid-template: 1fr / 1fr;
    padding: 0;
    margin: 0;
    list-style-type: none;
  }

  li {
    grid-area: 1 / 1;
    display: grid;
    place-items: center;
  }
}

@layer base {
  :root {
    --font-size-min: 16;
    --font-size-max: 20;
    --font-ratio-min: 1.2;
    --font-ratio-max: 1.33;
    --font-width-min: 375;
    --font-width-max: 1500;
  }

  html {
    color-scheme: light dark;
  }

  [data-theme='light'] {
    color-scheme: light only;
  }

  [data-theme='dark'] {
    color-scheme: dark only;
  }

  :where(.fluid) {
    --fluid-min: calc(
      var(--font-size-min) * pow(var(--font-ratio-min), var(--font-level, 0))
    );
    --fluid-max: calc(
      var(--font-size-max) * pow(var(--font-ratio-max), var(--font-level, 0))
    );
    --fluid-preferred: calc(
      (var(--fluid-max) - var(--fluid-min)) /
        (var(--font-width-max) - var(--font-width-min))
    );
    --fluid-type: clamp(
      (var(--fluid-min) / 16) * 1rem,
      ((var(--fluid-min) / 16) * 1rem) -
        (((var(--fluid-preferred) * var(--font-width-min)) / 16) * 1rem) +
        (var(--fluid-preferred) * var(--variable-unit, 100vi)),
      (var(--fluid-max) / 16) * 1rem
    );
    font-size: var(--fluid-type);
  }

  *,
  *:after,
  *:before {
    box-sizing: border-box;
  }

  body {
    background: light-dark(#fff, #000);
    display: grid;
    place-items: center;
    min-height: 100vh;
    font-family: 'SF Pro Text', 'SF Pro Icons', 'AOS Icons', 'Helvetica Neue',
      Helvetica, Arial, sans-serif, system-ui;
  }

  body::before {
    --size: 45px;
    --line: color-mix(in hsl, canvasText, transparent 70%);
    content: '';
    height: 100vh;
    width: 100vw;
    position: fixed;
    background: linear-gradient(
          90deg,
          var(--line) 1px,
          transparent 1px var(--size)
        )
        50% 50% / var(--size) var(--size),
      linear-gradient(var(--line) 1px, transparent 1px var(--size)) 50% 50% /
        var(--size) var(--size);
    -webkit-mask: linear-gradient(-20deg, transparent 50%, white);
            mask: linear-gradient(-20deg, transparent 50%, white);
    top: 0;
    transform-style: flat;
    pointer-events: none;
    z-index: -1;
  }

  .bear-link {
    color: canvasText;
    position: fixed;
    top: 1rem;
    left: 1rem;
    width: 48px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    opacity: 0.8;
  }

  :where(.x-link, .bear-link):is(:hover, :focus-visible) {
    opacity: 1;
  }

  .bear-link svg {
    width: 75%;
  }

  /* Utilities */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
}
div.tp-dfwv {
  width: 280px;
  * {
    text-transform: lowercase;
    white-space: nowrap;
    font-family: monospace;
  }
}
</style>


  
  
</head>

<body translate="no">
  <main>
      <ul></ul>
      <ul></ul>
      <ul></ul>
      <ul></ul>
    </main>
    <style id="keyframes" type="text/css"></style>
  
  
      <script type="module">
import { Pane } from '//repo.bfw.wiki/bfwrepo/js/tweakpane.4.0.3.js';

const config = {
  theme: 'dark',
  items: 4,
  duration: 20,
  blur: 2,
  x: 14,
  y: 34,
  step: 2,
  transition: 1,
  underlap: 2,
  stagger: 0.6,
  explode: false,
}

const sheet = document.querySelector('#keyframes')
const lists = document.querySelectorAll('ul')
const main = document.querySelector('main')
main.style.setProperty('--lists', lists.length)

let paths = [
  {
    title: 'CAT',
    path: 'M11.901 11.554l.802-4.1.798 4.1zm2.869-6.52h-4.15L8.2 15.884l4.503-3.635 4.695 3.934zm-2.067 8.156l-7.509 6.072H19.95zM24 5.02v2.77h-2.066v11.45h-.882l-2.436-2.04V7.79h-2.057V5.02zM6.872 16.864c.548-.458.642-1.024.642-1.532V13.2h-2.98v2.894a.75.75 0 0 1-.748.751c-.414 0-.722-.336-.722-.75V7.893c0-.414.308-.75.722-.75a.75.75 0 0 1 .749.75v2.913H7.51V7.785c0-1.67-1.092-3.044-3.75-3.047-2.728 0-3.76 1.38-3.76 3.05v8.563c0 1.655 1.314 2.907 2.995 2.907h.922Z',
  },
  {
    title: 'Cisco',
    path: 'M16.331 18.171V17.06l-.022.01c-.25.121-.522.19-.801.203a1.186 1.186 0 01-.806-.237 1.038 1.038 0 01-.352-.498 1.21 1.21 0 01-.023-.667c.052-.225.178-.426.357-.569.16-.134.355-.218.562-.242a1.85 1.85 0 011.061.198l.024.013v-1.117l-.051-.014a2.862 2.862 0 00-1.011-.132 2.34 2.34 0 00-.903.206c-.287.132-.54.327-.739.571a2.221 2.221 0 00-.04 2.705c.295.378.709.645 1.175.756.491.12 1.006.102 1.487-.052l.082-.023M5.336 18.171V17.06l-.022.01c-.25.121-.522.19-.801.203a1.183 1.183 0 01-.806-.237 1.03 1.03 0 01-.351-.498 1.202 1.202 0 01-.024-.667c.052-.225.177-.426.357-.569.16-.134.355-.218.562-.242a1.85 1.85 0 011.061.198l.024.013v-1.117l-.051-.014a2.862 2.862 0 00-1.011-.132 2.344 2.344 0 00-.903.206 2.08 2.08 0 00-.74.571 2.224 2.224 0 00-.041 2.705 2.11 2.11 0 001.176.756c.491.12 1.005.102 1.487-.052l.083-.023M9.26 17.249l-.004.957.07.012c.22.041.441.069.664.085.195.019.391.022.587.012.187-.014.372-.049.551-.104.21-.06.405-.163.571-.305a1.16 1.16 0 00.333-.478 1.31 1.31 0 00-.007-.96 1.068 1.068 0 00-.298-.414 1.261 1.261 0 00-.438-.255l-.722-.268a.388.388 0 01-.197-.188.245.245 0 01.008-.219.382.382 0 01.154-.142.798.798 0 01.257-.074c.153-.022.308-.021.46.005.18.02.358.051.533.096l.038.008v-.883l-.069-.015a4.749 4.749 0 00-.543-.097 2.844 2.844 0 00-.714-.003c-.3.027-.585.143-.821.33-.16.126-.281.293-.351.484-.104.29-.105.608 0 .899.054.145.14.274.252.381.097.093.207.173.327.236.157.084.324.149.497.195.057.017.114.035.17.054l.085.031.024.01c.084.03.162.078.226.14.045.042.08.094.101.151a.325.325 0 01.001.161.339.339 0 01-.166.198.856.856 0 01-.275.086 2.032 2.032 0 01-.427.021 5.208 5.208 0 01-.557-.074 9.195 9.195 0 01-.287-.067l-.033-.006zm-2.475.995h1.05v-4.167h-1.05v4.167zm12.162-2.936a1.095 1.095 0 011.541.158 1.094 1.094 0 01-.157 1.541l-.017.014a1.096 1.096 0 01-1.367-1.713m-1.525.854a2.193 2.193 0 002.666 2.107 2.139 2.139 0 00.701-3.937 2.207 2.207 0 00-3.367 1.83M22.961 10.728a.52.52 0 001.039 0V9.573a.52.52 0 00-1.039 0v1.155M20.117 10.728a.522.522 0 001.041 0V8.139a.521.521 0 00-1.04 0v2.589M17.231 11.771a.521.521 0 001.039 0V6.17a.52.52 0 00-1.039 0v5.601M14.393 10.728a.521.521 0 001.04 0V8.139a.52.52 0 00-1.039 0v2.589M11.494 10.728a.522.522 0 001.039 0V9.573a.52.52 0 0.........完整代码请登录后点击上方下载按钮下载查看