gsap实现拖动滑竿改变重力模拟弹跳动画效果代码
代码语言:html
所属分类:动画
代码描述:gsap实现拖动滑竿改变重力模拟弹跳动画效果代码,结合了InertiaPlugin+Draggable3+DrawSVGPlugin3插件。
代码标签: gsap 拖动 滑竿 改变 重力 模拟 弹跳 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <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> <!-- partial:index.partial.html --> <!-- 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="none" fill-rule="evenodd" transform="translate(1 1)"> <circle cx="232".........完整代码请登录后点击上方下载按钮下载查看
网友评论0