gsap实现滑竿滑块拖动表情变化效果代码
代码语言:html
所属分类:拖放
代码描述:gsap实现滑竿滑块拖动表情变化效果代码,用到了Draggable。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *, *::after, *::before { margin: 0; padding: 0; box-sizing: border-box; } /* width */ ::-webkit-scrollbar { width: 8px; height: 8px; } /* Track */ ::-webkit-scrollbar-track { background: #0a0a0a; } /* Handle */ ::-webkit-scrollbar-thumb { background: #ad3955; } /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { background: #ad3955; } html, body { height: 100%; width: 100%; } body { background: #191919; display: grid; place-items: center; } .slider { width: 15rem; height: 1.5rem; background: #333; border-radius: 1.5rem; box-shadow: 2px 2px 4px #111, inset 2px 2px 4px #666; position: relative; } .knob { position: absolute; top: 50%; transform: translateY(-50%); left: 0; width: 2rem; height: 2rem; border-radius: 50%; background: #AD3955; box-shadow: 2px 2px 4px #3e000f, inset 2px 2px 4px #ed7894; cursor: grab; z-index: 1; } .range { position: relative; background: linear-gradient(-90deg, #AD3955, #AD3955, #F9F871, #AD3955, #AD3955); background-size: 400% 100%; background-repeat: no-repeat; top: 0.15rem; left: 0.15rem; height: 1.2rem; width: 0; border-top-left-radius: 1.5rem; border-bottom-left-radius: 1.5rem; animation: gradient 1.5s linear infinite; box-shadow: inset 0px 0px 5px #333; transform: translateZ(1px); } @keyframes gradient { from { background-position-x: 0%; } to { background-position-x: 100%; } } .container { display: flex; flex-direction: column; gap: 1.5rem; } .emote { margin-left: auto; margin-right: auto; font-size: 5rem; width: fit-content; } .logo-wrapper { position: fixed; bottom: 1rem; right: 1rem; display: grid; place-items: center; opacity: 0; animation: fade-in 0.8s linear forwards; } @keyframes fade-in { to { opacity: 1; } } .logo { width: 3rem; height: auto; color: #fff; } .circle { position: absolute; width: 4rem; height: 4rem; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); stroke-dasharray: 52; stroke-dashoffset: 40; animation: rotate 3s linear infinite; filter: drop-shadow(0px 0px 6px #fff); } @keyframes rotate { from { transform: translate3d(-50%, -50%, 0) rotate(0deg); } to { transform: translate3d(-50%, -50%, 0) rotate(360deg); } } </style> </head> <body > <div class="container"> <div class="emote"> 😐 </div> <div id="slider" class="slider"> <div class="knob"></div> <div class="range"></div> </div> </div> <div class="logo-wrapper"> <svg class="logo" xmlns="http://www.w3.org/2000/svg" id="logo" viewBox="0 0 119 90"> <style> #logo { overflow: visible; } #logo path:nth-child(2) { animation: logo-child-1 0.55s cubic-bezier(.23, 1.24, .8, 1.06); } #logo path:nth-child(3) { animation: logo-child-2 0.55s cubic-bezier(.23, 1.24, .8, 1.06); } #logo path:nth-child(4) { animation: logo-child-3 0.55s cubic-bezier(.23, 1.24, .8, 1.06); } #logo path:nth-child(5) { animation: logo-child-4 0.55s cubic-bezier(.23, 1.24, .8, 1.06); } #logo path:nth-child(6) { animation: logo-child-5 0.55s cubic-bezier(.23, 1.24, .8, 1.06); } @keyframes logo-child-1 { from { transform: translateX(100%); } to { transform: translateY(0%); } } @keyframes logo-child-2 { from { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0