gsap实现一个拖动恒温控制器效果代码
代码语言:html
所属分类:拖放
代码描述:gsap实现一个拖动恒温控制器效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap'> <style> * { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :root { --l1: hsl(223,10%,100%); --l2: hsl(223,10%,95%); --l3: hsl(223,10%,90%); --l4: hsl(223,10%,85%); --l5: hsl(223,10%,80%); --l6: hsl(223,10%,75%); --text: hsl(223,10%,20%); font-size: calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320)); } body { background: var(--l5); color: var(--text); display: grid; place-items: center; font: 1em/1.5 Nunito, sans-serif; height: 100vh; } .temp { --angle: 0deg; background-color: var(--l3); border-radius: 3em; box-shadow: 0 0.25em 0.5em hsla(0,0%,0%,0.1); display: flex; flex-direction: column; justify-content: center; margin: 1.5em 0; padding: 2em; width: 16em; height: 28.4em; } .temp__dial, .temp__dial-core, .temp__dial-shades, .temp__shade-cold, .temp__shade-hot, .temp__drag, .temp__drag:before { border-radius: 50%; } .temp__dial { box-shadow: 0.5em 0.5em 1em var(--l6), -0.5em -0.5em 1em var(--l1); margin-bottom: 2.5em; position: relative; width: 12em; height: 12em; } .temp__dial-core, .temp__dial-shades, .temp__shade-cold, .temp__shade-hot, .temp__value, .temp__drag, .temp__drag:before { position: absolute; } .temp__dial-core, .temp__dial-shades, .temp__value, .temp__drag:before { top: 50%; left: 50%; } .temp__dial-core, .temp__dial-shades, .temp__value { transform: translate(-50%,-50%); } .temp__dial-core, .temp__dial-shades, .temp__value { transition: all 0.2s ease-in-out; } .temp__dial-core, .temp__dial-shades { transition-delay: 0.1s; width: 8.5rem; height: 8.5rem; } .temp__dial-core { box-shadow: 0 0.2rem 0.5rem 0.1rem inset; color: hsla(0,0%,0%,0.1); } .temp__dial-shades, .temp__drag:before { opacity: 0; } .temp__shade-cold, .temp__shade-hot, .temp__drag { width: 100%; height: 100%; } .temp__shade-cold { background-image: radial-gradient(100% 100% at 50% 100%,hsl(193,90%,55%),hsl(268,90%,55%)); } .temp__shade-hot { background-image: radial-gradient(100% 100% at 50% 100%,hsl(63,90%,55%),hsl(13,90%,45%)); } .temp__drag { cursor: grab; z-index: 1; } .temp__drag:active, .temp__drag--active { cursor: grabbing; } .temp__drag:active ~ .temp__dial-core, .temp__drag--active ~ .temp__dial-core, .temp__drag:active ~ .temp__dial-shades, .temp__drag--active ~ .temp__dial-shades { transition-delay: 0s; width: 6em; height: 6em; } .temp__drag:active ~ .temp__dial-core, .temp__drag--active ~ .temp__dial-core { color: hsla(0,0%,0%,0.3); } .temp__drag:before { background: linear-gradient(145deg,var(--l5),var(--l1)); content: ""; display: block; top: 50%; left: 50%; width: 2em; height: 2em; transform: translate(-50%,-50%) translateY(4.5em) rotate(calc(-1 * var(--angle))); transition: opacity 0.2s ease-in-out; } .temp__drag:active:before, .temp__drag--active:before, .temp__drag:active ~ .temp__dial-shades, .temp__drag--active ~ .temp__dial-shades { opacity: 1; } .temp__drag:active:before, .temp__drag--active:before { transition-delay: 0.1s; } .temp__drag:active ~ .temp__value, .temp__drag--active ~ .temp__value { color: hsl(223,10%,100%); } .temp__value { font-size: 2.5em; font-weight: bold; text-align: right; width: 3ch; } .temp__digit { display: inline-block; } .temp__digit--inc { animation: digitA 0.15s linear, digitB 0.15s 0.15s linear; } .temp__digit--dec { animation: digitB 0.15s linear reverse, digitA 0.15s 0.15s linear reverse; } .temp__heading { font-size: 0.5em; letter-spacing: 0.2em; text-transform: uppercase; } .temp__outdoors { background-color: var(--l4); border-radius: 0.75em; box-shadow: 0 0.1em 0.1em var(--l5) inset, 0 -0.1em 0.1em var(--l2) inset; display: flex; justify-content: space-between; padding: 0.75em 1.75em; text-align: center; } .temp__o-value { font-size: 1.5em; } /* Dark theme */ @media (prefers-color-scheme: dark) { :root { --l1: hsl(223,10%,50%); --l2: hsl(223,10%,45%); --l3: hsl(223,10%,40%); --l4: hsl(223,10%,35%); --l5: hsl(223,10%,30%); --l6: hsl(223,10%,25%); --text: hsl(223,10%,80%); } } /* Animations */ @keyframes digitA { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-25%); } } @keyframes digitB { from { opacity: 0; transform: translateY(25%); } to { opacity: 1; transform: translateY(0); } } </style> </head> <body > <div class="temp"> <div class="temp__dial"> <div class="temp__drag"></div> <div class="temp__dial-shades"> <div class="temp__shade-cold"></div> <div class="temp__shade-hot"></div> </div> <div class="temp__dial-core"></div> <div class="temp__value"> <span class="temp__digit">6</span><span class="temp__digit">0</span>° </div> </div> <div class="temp__outdoors"> <div class="temp__outdoors-col"> <small class="temp__heading">Outside</small> <br> <span class="temp__o-value">0°</span> </div> <div class="temp__outdoors-col"> <small class="temp__heading">Humidity</small> <br> <span class="temp__o-value">0%</span> </div> </div> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.5.2.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Draggable3.min.js"></script> <script > document.addEventListener("DOMContentLoaded",function(){ const thermostat = new NeuThermostat(".temp"); }); class NeuThermostat { constructor(el) { this.el = document.querySelector(el); this.temp = 60; this.tempMin = 60; this.tempMax =.........完整代码请登录后点击上方下载按钮下载查看
网友评论0