滑行者（可複制源代碼），网站设计素材，可用于页面拖动等，增加网站设计的酷炫效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>滑行者</title> <style> html,body{height:100%}body{display:flex;justify-content:center;background:#fffdff;margin:0;font-family:'poppins',sans-serif;overflow:hidden}.footer{position:absolute;bottom:0;right:0;font-family:monospace;color:#888;padding:10px;font-size:12px}.footer a{color:#888}:root{--_size:min(400px,min(84vw,64vh))}.morph-container,.morph-container *{transition:all 0.2s ease-out}.morph-container *{background:#000;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;width:fit-content}.morph-container{position:absolute;left:0;right:0;top:0;bottom:10%;margin:auto;width:300px;height:500px;display:flex;justify-content:center;align-items:center}@media screen and (max-width:480px),screen and (max-height:600px){.morph-container{scale:0.7}}@media screen and (max-width:400px),screen and (max-height:480px){.morph-container{scale:0.5}}.morph-head{width:56px;height:56px;border-radius:100px;translate:0% -175%}.morph-body{width:50px;height:130px;border-radius:100px}.l-arm,.r-arm{top:0;bottom:unset}.l-arm .upper-arm{width:27px;height:92px;border-radius:100px;transform-origin:50% 12%;translate:-50% 54%}.l-arm .lower-arm{width:24px;height:75px;border-radius:100px;transform-origin:50% 12%;translate:-10% 86%}.r-arm .upper-arm{width:27px;height:60px;border-radius:100px;transform-origin:50% -60%;translate:-40% 135%}.r-arm .lower-arm{width:24px;height:68px;border-radius:100px;transform-origin:50% 12%;translate:-10% 67%}.morph-legs .l-leg{width:30px;height:164px;border-radius:100px;transform-origin:50% 0%;translate:-50% 94%}.morph-legs .r-leg .upper-leg{width:30px;height:90px;border-radius:100px;transform-origin:50% 0%;translate:-50% 105%}.morph-legs .r-leg .upper-leg .lower-leg{width:25px;height:100px;border-radius:100px;transform-origin:50% 0%;translate:10% 85%}.test::after{position:absolute;top:var(--up);left:var(--left);width:5px;height:5px;content:'';background-color:rgb(30,255,0);border-radius:50%;transform:translate(-50%,-50%)}.slider{position:absolute;bottom:0}input[type=range]{position:absolute;left:0;right:0;bottom:10%;margin:auto;width:var(--_size);height:fit-content;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}input[type="range"]::-webkit-slider-runnable-track{background:#dddddd22;box-shadow:0 0 2px 2px #bbb8,0 0 0px 1px #bbb8,inset 0 0 4px 1px #fff8,inset 0 0 5px 5px #bbb8;height:1rem;border-radius:20px;overflow:hidden}input[type="range"]::-moz-range-track{background:#dddddd22;box-shadow:0 0 2px 2px #bbb8,0 0 0px 1px #bbb8,inset 0 0 4px 1px #fff8,inset 0 0 5px 5px #bbb8;height:1rem;border-radius:20px;overflow:hidden}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:100%;border-radius:100px;background:#e6e6e6;scale:1;transition:all 0.2s ease-in-out;box-shadow:0px 2px 3px 0px #444444,inset 0 0 4px 1px #ffffff}input[type=range]::-webkit-slider-thumb:hover{box-shadow:0px 2px 4px 1px #3f3f3f,inset 0 0 4px 1px #ffffff} </style></head><body> <div class="morph-container"> <div class="morph-head"></div> <div class="morph-body"> <div class="l-arm"> <div class="upper-arm"> <div class="lower-arm"></div> </div> </div> <div class="r-arm"> <div class="upper-arm"> <div class="lower-arm"></div> </div> </div> </div> <div class="morph-legs"> <div class="l-leg"> <div class="upper-leg"> </div> </div> <div class="r-leg"> <div class="upper-leg"> <div class="lower-leg"></div> </div> </div> </div> </div> <input type="range" min="0" max="100" value="0" class="slider" id="myRange"></body><script> var slider=document.getElementById("myRange");var morphContainer=document.querySelector(".morph-container");var morphHead=document.querySelector(".morph-head");var morphArmLeftUp=document.querySelector(".l-arm .upper-arm");var morphArmLeftLow=document.querySelector(".l-arm .lower-arm");var morphArmRightUp=document.querySelector(".r-arm .upper-arm");var morphArmRightLow=document.querySelector(".r-arm .lower-arm");var morphLegRightUp=document.querySelector(".r-leg .upper-leg");var morphLegRightLow=document.querySelector(".r-leg .lower-leg");slider.oninput=function(){var percentage=this.value;morphContainer.style.rotate=`${sliderFunction(percentage,0,45)}deg`;morphContainer.style.translate=`${sliderFunction(percentage,0,7)}%0%`;morphHead.style.translate=`${sliderFunction(percentage,0,38)}%-175%`;morphArmLeftUp.style.rotate=`${sliderFunction(percentage,0,75)}deg`;morphArmLeftLow.style.rotate=`${sliderFunction(percentage,0,-75)}deg`;morphArmRightUp.style.rotate=`${sliderFunction(percentage,0,-63)}deg`;morphArmRightLow.style.rotate=`${sliderFunction(percentage,0,-88)}deg`;morphLegRightUp.style.rotate=`${sliderFunction(percentage,0,-95)}deg`;morphLegRightLow.style.rotate=`${sliderFunction(percentage,0,119)}deg`}function sliderFunction(percentage,startNum,endNum){return endNum+((100-percentage)/100)*(startNum-endNum)}</script></html>
掃描查看手機版網站
