gsap+Draggable实现炫酷滑块调节重力大小动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：gsap+Draggable实现炫酷滑块调节重力大小动画效果代码

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap" rel="stylesheet"> 


  
  
<style>
:root {
  --ui-blue: #99dff4;
  --current-ui: #ffb300;
  --background: #0e0e0e;
  --range-gradient: 50%;
  --weight: 400;
}

body {
  font-family: "Orbitron", sans-serif;
  font-weight: 400 900;
  background: var(--background);
  color: var(--current-ui);
  display: grid;
  place-content: center;
  height: 100vh;
}

.wrapper {
  position: relative;
  width: 1080px;
  height: 600px;
  display: grid;
  place-content: center;
}

.range-key {
  position: absolute;
  left: 0;
  top: 0;
}

.right-border {
  position: absolute;
  right: 0;
  top: 0;
}

.dial-wrapper {
  position: relative;
  width: 466px;
  height: 466px;
  z-index: 3;
  display: grid;
  place-content: center;
}

.dial-ui {
  position: absolute;
  top: 0;
  left: 0;
}

.dial-numbers {
  pointer-events: none;
  position: relative;
  text-align: center;
  line-height: 1;
}

.number {
  font-size: 100px;
}

.units {
  color: var(--ui-blue);
  font-weight: 400;
  display: block;
  font-size: 25px;
  letter-spacing: 4px;
}

.bounce-wrapper {
  height: 400px;
  position: absolute;
  right: 100px;
  top: 100px;
  border: 1px solid currentColor;
  border-bottom: 8px solid;
  width: 120px;
  overflow: hidden;
}

.ball {
  position: absolute;
  bottom: -2px;
  left: 30px;
  border-radius: 100%;
  height: 60px;
  width: 60px;
  border: 3px solid var(--ui-blue);
  z-index: 10;
  will-change: transform;
}

.bounce-simulation {
  display: block;
  text-transform: uppercase;
  position: absolute;
  top: 60px;
  letter-spacing: 1px;
  right: 100px;
  width: 123px;
}

.thicc {
  font-weight: var(--weight);
}

.range-label {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin-top: -8px;
  font-size: 16px;
  letter-spacing: 5px;
  text-transform: uppercase;
  text-align: center;
  color: var(--ui-blue);
}

.gravity-range {
  position: absolute;
  color: currentColor;
  top: 0;
  left: 170px;
  width: 600px;
  height: 90px;
  cursor: pointer;
  background-color: transparent;
  transform-origin: top left;
  transform: rotate(-90deg) translateX(-100%);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.gravity-range, .gravity-range::-webkit-slider-runnable-track, .gravity-range::-webkit-slider-thumb {
  -webkit-appearance: none;
}
.gravity-range::-webkit-slider-runnable-track {
  height: 2px;
  background: linear-gradient(to right, currentColor var(--range-gradient), #364c52 var(--range-gradient), #364c52);
}
.gravity-range::-moz-range-track {
  height: 2px;
  background: #364c52;
}
.gravity-range::-moz-range-progress {
  background-color: currentColor;
}
.gravity-range::-webkit-slider-thumb {
  width: 30px;
  height: 30px;
  border-radius: 100%;
  background: var(--background);
  border: 1px solid var(--ui-blue);
  margin-top: -14px;
}
.gravity-range::-moz-range-thumb {
  width: 30px;
  height: 30px;
  border-radius: 100%;
  background: var(--background);
  border: 1px solid var(--ui-blue);
}

.ring {
  position: absolute;
  top: 17px;
  left: 215px;
  transform: translate(-50%, -50%);
  border: 1px solid var(--ui-blue);
  border-radius: 100%;
  pointer-events: none;
}
.ring--0 {
  height: 50px;
  width: 50px;
  opacity: 0.7;
}
.ring--1 {
  height: 60px;
  width: 60px;
  opacity: 0.6;
}
.ring--2 {
  height: 70px;
  width: 70px;
  opacity: 0.5;
}
.ring--3 {
  height: 80px;
  width: 80px;
  opacity: 0.4;
}
.ring--4 {
  height: 90px;
  width: 90px;
  opacity: 0.3;
}
</style>


</head>

<body >
  <!-- component wrapper -->
<div class="wrapper">

  <!-- left border/key -->
  <svg class="range-key" xmlns="http://www.w3.org/2000/svg" width="159" height="600" viewBox="0 0 159 600">
    <defs>
      <linearGradient id="gradient" x1="50%" x2="50%" y1="0%" y2="100%">
        <stop offset="0%" stop-color="#C50000" />
        <stop offset="50%" stop-color="#FFB300" />
        <stop offset="100%" stop-color="#198D00" />
      </linearGradient>
    </defs>
    <path fill="url(#gradient)" fill-rule="evenodd" d="M159 0v2h-13.1a49 49 0 00-48.5 42l-.1.7-65 498A49 49 0 0080.7 598H159v2H62a62 62 0 01-62-62V62A62 62 0 0162 0h97z" />
  </svg>

  <!--  range input label  -->
  <label class="range-label" for="grav">Gravity Preference</label>
  <input name="grav" id="grav" class="gravity-range" type="range" id="vol" min="0" max="100" value="50">

  <!--  the dial  -->
  <div class="dial-wrapper">
    <svg class="dial-ui" xmlns="http://www.w3.org/2000/svg" width="466" height="466" viewBox="0 0 466 466">
      <defs>
        <filter id="shadow" width="126.9%" height="126.9%" x="-13.4%" y="-13.4%" filterUnits="objectBoundingBox">
          <feMorphology in="SourceAlpha" operator="dilate" radius="6.5" result="shadowSpreadOuter1" />
          <feOffset in="shadowSpreadOuter1" result="shadowOffsetOuter1" />
          <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="10" />
          <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1" />
          <feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" />
        </filter>
      </defs>
      <g fill="non.........完整代码请登录后点击上方下载按钮下载查看