弹性滑动条特效-html代码-BFW代码库

弹性滑动条特效

代码语言：html

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title> glitchy elastic slider</title>

<style>
    body {
  height: 100vh;
  width: 100vw;
  display: flex;
  background: #FBFBFB;
  overflow: hidden;
}

#container {
  margin: auto;
}
#container .total {
  width: 600px;
  height: 48px;
  padding: 8px 4px;
  position: relative;
  cursor: pointer;
}
#container .total > div {
  height: 100%;
  border-radius: 16px;
  pointer-events: none;
  position: absolute;
}
#container .total .previous {
  top: 30px;
  left: 0px;
  height: 4px;
  background: #040404;
  width: calc(((100% / 6)*3) - 32px);
}
#container .total .current {
  width: 48px;
  top: 0px;
  position: relative;
}
#container .total .current > div {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  mix-blend-mode: multiply;
  will-change: opacity;
}
#container .total .current > div.yellow {
  background: #ffff00;
}
#container .total .current > div.magenta {
  background: #ff00ff;
}
#container .total .current > div.cyan {
  background: #00ffff;
}
#container .total .next {
  top: 30px;
  right: 0px;
  height: 4px;
  background: #040404;
  width: calc(((100% / 6)*3) - 32px);
}

  </style>

</head>
<body translate="no">
<div id="container">
<div class="total">
<div class="previous"></div>
<div class="current">
<div class="yellow"></div>
<div class="magenta"></div>
<div class="cyan"></div>
</div>
<div class="next"></div>
</div>
<div>

<script src='http://repo.bfw.wiki/bfwrepo/js/TweenMax.min.js'></script>

<script src='http://repo.bfw.wiki/bfwrepo/js/OrGaMg.js'></script>
<script>
      API('xmerjZ');

const steps = 6;

let current = {
  value: 3 };


let total = document.querySelector(".total");

const currentDiv = document.querySelector(".current");
const yellow = currentDiv.querySelector(".yellow");
const magenta = currentDiv.querySelector(".magenta");
const cyan = currentDiv.querySelector(".cyan");

const previousDiv = document.querySelector(".previous");
const nextDiv = document.querySelector(".next");

changeStep(2);
setTimeout(() => {
  changeStep(5);
  setTimeout(.........完整代码请登录后点击上方下载按钮下载查看